会话缓存和本地缓存的实现-优快云博客

export const sessionCache = {
  set: (key: string, value: string) => {
    if (!sessionStorage) {
      return
    }
    if (key != null && value != null) {
      sessionStorage.setItem(key, value)
    }
  },
  get: (key: string): string | null => {
    if (!sessionStorage) {
      return null
    }
    if (key == null) {
      return null
    }
    return sessionStorage.getItem(key)
  },
  setJSON: (key: string, jsonValue: any, minutes = 5) => {
    if (jsonValue != null) {
      const item = {
        data: jsonValue,
        expiry: new Date().getTime() + minutes * 60 * 1000,
      }
      sessionCache.set(key, JSON.stringify(item))
    }
  },
  getJSON: (key: string): any => {
    const value = sessionCache.get(key)
    if (!value) {
      return null
    }
    try {
      const item = JSON.parse(value)
      if (item.expiry && new Date().getTime() > item.expiry) {
        return null
      }
      return item.data || item
    } catch (e) {
      console.error(`Failed to parse JSON value for key ${key}: ${e}`)
    }
    return null
  },
  remove: (key: string) => {
    sessionStorage.removeItem(key)
  },
}
export const localCache = {
  set: (key: string, value: string) => {
    if (!localStorage) {
      return
    }
    if (key != null && value != null) {
      localStorage.setItem(key, value)
    }
  },
  get: (key: string): string | null => {
    if (!localStorage) {
      return null
    }
    if (key == null) {
      return null
    }
    return localStorage.getItem(key)
  },
  setJSON: (key: string, jsonValue: any) => {
    if (jsonValue != null) {
      localCache.set(key, JSON.stringify(jsonValue))
    }
  },
  getJSON: (key: string): any => {
    const value = localCache.get(key)
    if (value != null) {
      try {
        return JSON.parse(value)
      } catch (e) {
        console.error(`Failed to parse JSON value for key ${key}: ${e}`)
      }
    }
    return null
  },
  remove: (key: string) => {
    localStorage.removeItem(key)
  },
}
export default {
  /**
   * 会话级缓存
   */
  session: sessionCache,
  /**
   * 本地缓存
   */
  local: localCache,
}

提供了对浏览器 sessionStorage 和 localStorage 的封装，提供了更便捷的操作方法。

方法：

set(key: string, value: string)
- 功能：存储字符串值
- 参数检查：确保 sessionStorage 存在且 key/value 不为 null
- 使用 sessionStorage.setItem() 存储
get(key: string): string | null
- 功能：获取存储的字符串值
- 参数检查：确保 sessionStorage 存在且 key 不为 null
- 使用 sessionStorage.getItem() 获取
setJSON(key: string, jsonValue: any, minutes = 5)
- 功能：存储 JSON 数据并设置过期时间（默认5分钟）
- 将数据和过期时间封装为对象存储
- 过期时间计算：当前时间 + 指定分钟数转换的毫秒数
getJSON(key: string): any
- 功能：获取 JSON 数据并检查是否过期
- 如果数据不存在或已过期返回 null
- 只返回有效数据部分（item.data）
remove(key: string)
- 功能：移除指定 key 的数据
- 直接调用 sessionStorage.removeItem()

2. localCache (本地缓存)

本地缓存基于 localStorage，数据会持久化存储，除非手动清除。

方法：

set(key: string, value: string)
- 功能：存储字符串值
- 参数检查：确保 localStorage 存在且 key/value 不为 null
- 使用 localStorage.setItem() 存储
get(key: string): string | null
- 功能：获取存储的字符串值
- 参数检查：确保 localStorage 存在且 key 不为 null
- 使用 localStorage.getItem() 获取
setJSON(key: string, jsonValue: any)
- 功能：存储 JSON 数据
- 直接将对象转为 JSON 字符串存储
- 注意：没有实现过期时间功能
getJSON(key: string): any
- 功能：获取 JSON 数据
- 解析存储的 JSON 字符串为对象
- 如果解析失败返回 null
remove(key: string)
- 功能：移除指定 key 的数据
- 直接调用 localStorage.removeItem()

主要区别

过期时间：
- sessionCache 的 setJSON 方法支持设置过期时间
- localCache 的 JSON 存储没有过期时间功能
存储生命周期：
- sessionCache 数据在会话结束时（关闭标签页）自动清除
- localCache 数据会持久化存储
JSON 数据处理：
- sessionCache 的 JSON 数据会封装为 {data: ..., expiry: ...} 结构
- localCache 直接存储原始 JSON 数据

使用

// 存储会话数据，5分钟后过期
sessionCache.setJSON('user_token', {token: 'abc123'}, 5);

// 获取会话数据（如果过期返回null）
const token = sessionCache.getJSON('user_token');

// 存储本地数据（永久）
localCache.setJSON('user_prefs', {theme: 'dark'});

// 获取本地数据
const prefs = localCache.getJSON('user_prefs');