React中sessionStorage、localStorage与Cache的区别及选型建议

一、localStorage、sessionStorage与Cache的核心差异 #

• localStorage：永久存储（除非用户主动删除或代码清除），同源域名下所有标签页共享数据，容量约5-10MB，仅支持字符串格式的键值对存储，适合保存非敏感的长期用户偏好类数据。
• sessionStorage：会话级存储，仅在当前标签页有效，标签关闭后数据自动清除，同源域名下不同标签页数据不共享，容量与localStorage相当，适合临时保存当前会话的一次性数据（比如表单草稿）。
• Cache：属于Service Worker生态的HTTP缓存工具，专门用于存储HTTP请求的响应内容，而非通用键值对数据。它以请求URL为标识绑定响应，生命周期可通过Cache API手动控制，浏览器也可能在磁盘空间不足时自动清理。和前两者的核心区别是：它是为HTTP请求缓存设计的，不能直接存储普通JS对象，使用复杂度更高，需要处理缓存更新、版本冲突等问题，多用于实现离线访问场景。

二、针对你的场景的最佳存储方案 #

你的需求是：API数据持久化避免重复请求，且需在登录60分钟后（token过期时）自动删除存储数据。结合各方案特性，推荐如下：

方案适配性分析 #

1. sessionStorage：不符合过期需求——若用户持续打开标签页超过60分钟，数据不会自动清除，仍会被读取使用。
2. Cache：冗余且复杂——你的需求是存储API返回数据而非缓存请求本身，引入Cache需要搭配Service Worker，增加不必要的开发成本。
3. localStorage+过期时间管理：最贴合需求，实现成本低且可控。

具体实现思路 #

• 存储API数据时，同时保存数据本体和过期时间戳（当前时间+60601000毫秒）。
• 每次读取数据前，先校验当前时间是否超过过期时间：
  • 未过期则直接使用存储数据；
  • 已过期则删除存储数据，重新调用API获取新数据并更新存储的过期时间。
• 当token过期触发登出逻辑时，主动清除localStorage中的API数据。

React示例代码 #

// 存储API数据及过期时间
const saveApiData = (storageKey, data) => {
  const expireTime = Date.now() + 60 * 60 * 1000; // 60分钟后过期
  localStorage.setItem(storageKey, JSON.stringify({ data, expireTime }));
};

// 获取并校验存储的API数据
const getValidApiData = (storageKey) => {
  const storedStr = localStorage.getItem(storageKey);
  if (!storedStr) return null;

  const { data, expireTime } = JSON.parse(storedStr);
  if (Date.now() > expireTime) {
    localStorage.removeItem(storageKey);
    return null;
  }
  return data;
};

// 登出时清除存储的API数据
const clearApiDataOnLogout = (storageKey) => {
  localStorage.removeItem(storageKey);
};

如果你使用状态管理库（如Redux、Zustand），也可以将内存状态与localStorage持久化结合，进一步简化数据读取和过期校验的逻辑。

内容的提问来源于stack exchange，提问作者NoDiggityNoDoubt