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）