HOW - localstorage 超时管理方案

文章目录

• 实现思路
• 示例代码
• • 封装工具函数
  • 使用示例
  • 补充建议

localStorage 本身 不支持过期时间（超时设置） ，因为它设计上是永久存储 （除非用户手动清除或调用 removeItem()）。

不过，我们可以通过在存储时附带时间戳的方式，自行实现"超时机制"。

---

实现思路

当你调用 localStorage.setItem() 时，不直接存原始值，而是存一个带有时间戳的对象，例如：

{
  value: "存储的数据",
  expire: 过期时间戳（单位：毫秒）
}

然后在读取时判断是否过期，如果过期则自动清除并返回 null。

---

示例代码

封装工具函数

/**
 * 设置带过期时间的 localStorage
 * @param {string} key 键名
 * @param {any} value 值
 * @param {number} expire 过期时间（毫秒）
 */
function setLocalStorage(key, value, expire) {
  const data = {
    value,
    expire: Date.now() + expire, // 当前时间 + 有效期
  };
  localStorage.setItem(key, JSON.stringify(data));
}

/**
 * 获取带过期判断的 localStorage
 * @param {string} key 键名
 * @returns {any | null} 值（若过期或不存在则返回 null）
 */
function getLocalStorage(key) {
  const raw = localStorage.getItem(key);
  if (!raw) return null;

  try {
    const data = JSON.parse(raw);
    if (data.expire && Date.now() > data.expire) {
      localStorage.removeItem(key); // 已过期，删除
      return null;
    }
    return data.value;
  } catch {
    return null;
  }
}

/**
 * 删除 localStorage
 */
function removeLocalStorage(key) {
  localStorage.removeItem(key);
}

---

使用示例

// 存储 10 分钟有效的数据
setLocalStorage("userInfo", { name: "Tom" }, 10 * 60 * 1000);

// 读取数据
const user = getLocalStorage("userInfo");
if (user) {
  console.log("还没过期：", user);
} else {
  console.log("数据已过期或不存在");
}

---

补充建议

场景	建议
页面刷新频繁但不希望长期保存数据	用 sessionStorage
想要真正的过期机制（浏览器自动清理）	考虑 IndexedDB + 定时任务 或 后端 token 管控
想统一管理缓存	可以封装一个缓存工具类或用第三方库（如 store.js）