JavaScript 中怎么在 LocalStorage 中存储带有时间戳的缓存对象实现自动过期-js教程-PHP中文网

localstorage带时间戳自动过期缓存的核心是写入时存时间戳与数据对象，读取时用date.now()校验是否超期，超期则清除并返回null；需处理解析异常、配额超限及系统时间篡改等边界情况。

javascript 中怎么在 localstorage 中存储带有时间戳的缓存对象实现自动过期

在 LocalStorage 中实现带时间戳的自动过期缓存，核心思路是：每次写入时附加当前时间戳，读取时对比时间戳与预设有效期，过期则清除并返回 null。

存储时添加时间戳和原始数据

把需要缓存的数据和生成时间一起打包成对象，再序列化存入 LocalStorage。注意不要直接覆盖原值，而是结构化保存。

用 Date.now() 获取毫秒级时间戳（比 new Date() 更简洁、无时区干扰）
有效期建议以毫秒为单位（如 5 分钟 = 5 * 60 * 1000），便于计算
示例写法：

function setCache(key, value, expiresMs = 5 * 60 * 1000) {
  const item = {
    data: value,
    timestamp: Date.now(),
    expires: expiresMs
  };
  localStorage.setItem(key, JSON.stringify(item));
}

读取时校验是否过期

读取后先解析，再判断当前时间是否超过“写入时间 + 有效期”，超时就主动删除并返回 null，避免后续误用过期数据。

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

用 Date.now() - item.timestamp >= item.expires 判断过期
过期后调用 localStorage.removeItem(key) 清理，保持存储干净
未过期才返回 item.data，不返回整个缓存对象

function getCache(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null;
<p>const item = JSON.parse(itemStr);
if (Date.now() - item.timestamp >= item.expires) {
localStorage.removeItem(key);
return null;
}</p><p>return item.data;
}</p>

封装成可复用的工具函数

把 set/get 逻辑合并，并支持自定义默认过期时间，减少重复判断。也可扩展支持「永久缓存」（expires 设为 0 或 null）。

设置默认过期时间为 10 分钟（可按需调整）
允许传入 null 或 0 表示不过期
读取失败（JSON 解析异常）时也应安全降级，返回 null 而非抛错

const Cache = {
  set(key, value, expiresMs = 10 * 60 * 1000) {
    if (expiresMs > 0) {
      const item = { data: value, timestamp: Date.now(), expires: expiresMs };
      try {
        localStorage.setItem(key, JSON.stringify(item));
      } catch (e) {
        // QuotaExceededError 等忽略
      }
    } else {
      try {
        localStorage.setItem(key, JSON.stringify(value));
      } catch (e) {}
    }
  },
<p>get(key) {
const itemStr = localStorage.getItem(key);
if (!itemStr) return null;</p><pre class="brush:php;toolbar:false;">try {
  const item = JSON.parse(itemStr);
  // 判断是否含 timestamp 字段来区分「带过期」和「永久缓存」
  if (typeof item.timestamp === 'number' && typeof item.expires === 'number' && item.expires > 0) {
    if (Date.now() - item.timestamp >= item.expires) {
      localStorage.removeItem(key);
      return null;
    }
    return item.data;
  }
  return item; // 永久缓存，直接返回
} catch (e) {
  localStorage.removeItem(key); // 解析失败，清理脏数据
  return null;
}

} };