浏览器数据存储

JavaScript 中 sessionStorage、localStorage 和 Cookie 是客户端数据存储的三种主要方式

常用操作(CRUD)

export enum StorageType {
  Cookie = "cookie",
  Local = "localStorage",
  Session = "sessionStorage",
}

/**
 * 设置存储
 * @param key 键名
 * @param value 值（复杂类型会自动序列化）
 * @param type 存储类型
 * @param expires 过期秒数（仅 Cookie 有效，默认30分钟）
 */
export function setData(
  key: string,
  value: any,
  type: StorageType = StorageType.Local,
  expires: number = 60 * 60 * 30
): void {
  const serializedValue =
    typeof value === "string" ? value : JSON.stringify(value);

  switch (type) {
    case StorageType.Cookie:
      const date = new Date();
      date.setTime(date.getTime() + expires * 1000);
      document.cookie = `${key}=${encodeURIComponent(
        serializedValue
      )}; expires=${date.toUTCString()}; path=/`;
      break;
    case StorageType.Local:
      localStorage.setItem(key, serializedValue);
      break;
    case StorageType.Session:
      sessionStorage.setItem(key, serializedValue);
      break;
  }
}

/**
 * 获取存储
 * @param key 键名
 * @param type 存储类型
 * @returns 解析后的值（不存在则返回 null）
 */
export function getData<T>(
  key: string,
  type: StorageType = StorageType.Local
): T | null {
  let value: string | null = null;

  switch (type) {
    case StorageType.Cookie:
      const cookies = document.cookie.split("; ");
      for (const cookie of cookies) {
        const [cookieKey, cookieValue] = cookie.split("=");
        if (cookieKey === key) {
          value = cookieValue ? decodeURIComponent(cookieValue) : null;
          break;
        }
      }
      break;
    case StorageType.Local:
      value = localStorage.getItem(key);
      break;
    case StorageType.Session:
      value = sessionStorage.getItem(key);
      break;
  }

  if (!value) return null;

  // 尝试解析 JSON（处理对象/数组）
  try {
    return JSON.parse(value) as T;
  } catch {
    // 非 JSON 字符串直接返回
    return value as unknown as T;
  }
}

/**
 * 删除存储
 * @param key 键名
 * @param type 存储类型
 */
export function removeData(
  key: string,
  type: StorageType = StorageType.Local
): void {
  switch (type) {
    case StorageType.Cookie:
      document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
      break;
    case StorageType.Local:
      localStorage.removeItem(key);
      break;
    case StorageType.Session:
      sessionStorage.removeItem(key);
      break;
  }
}

/**
 * 清空存储（Cookie 需逐个删除）
 * @param type 存储类型
 */
export function clearData(type: StorageType = StorageType.Local): void {
  switch (type) {
    case StorageType.Cookie:
      document.cookie.split("; ").forEach((cookie) => {
        const key = cookie.split("=")[0];
        if (key) {
          this.remove(key?.toString() ?? "", StorageType.Cookie);
        }
      });
      break;
    case StorageType.Local:
      localStorage.clear();
      break;
    case StorageType.Session:
      sessionStorage.clear();
      break;
  }
}

使用示例

// 存储用户信息到 localStorage
setData("user", { id: 1, name: "John" }, StorageType.Local);
// 存储临时令牌到 sessionStorage
setData("token", "abc123", StorageType.Session);
// 存储偏好设置到 Cookie（有效期 30 天）
setData("theme", "dark", StorageType.Cookie, 30);
// 读取数据
const user = getData<{ id: number; name: string }>("user");
const token = getData<string>("token", StorageType.Session);
// 删除数据
removeData("theme", StorageType.Cookie);
// 清空所有 localStorage 数据
clearData(StorageType.Local);