持久化存储如何实现按需过期 教你给 localStorage 增加有效期

localStorage本身不支持过期时间，但可通过封装实现TTL机制：写入时存入含时间戳的对象，读取时校验并自动清理过期项，兼容旧数据且零迁移成本。

localStorage 本身不支持设置过期时间，但可以通过封装一层逻辑，在写入时记录时间戳，在读取时自动判断是否过期，从而实现“按需过期”的持久化存储。

手动添加时间戳 + 读取时校验

这是最轻量、兼容性最好的方式。每次 setItem 时，把数据和当前时间戳一起存为一个对象；getItem 时先解析，再比对时间戳是否超期。

• 写入：用 JSON.stringify({ value: data, expires: Date.now() + ttl }) 存储
• 读取：先 JSON.parse，检查 expires > Date.now()，过期则 removeItem 并返回 null
• ttl 单位统一用毫秒，比如 1000 * 60 * 60 表示 1 小时

封装成带 TTL 的工具类

避免每次手动处理，可封装成类似 StorageWithTTL 的类，提供 set(key, value, ttl) 和 get(key) 方法。

• set 方法内部自动拼装带时间的对象，调用原生 localStorage.setItem
• get 方法自动解析、校验、清理过期项，使用者无感知
• 可选支持「惰性删除」——只在读取时清理，不额外轮询或监听

兼容已有 localStorage 数据

新逻辑上线后，老数据没有时间戳字段，直接 JSON.parse 会报错或返回 undefined。稳妥做法是做兼容判断：

• try-catch 解析，失败说明是原始字符串，视为永不过期（或按默认策略处理）
• 成功解析后，检查是否有 expires 字段，没有则当作无有效期，保留原值
• 这样新旧数据可共存，迁移零成本

进阶：配合事件或定时器主动清理

如果业务对存储体积敏感，或需要强时效（比如登录态必须准时失效），可在页面加载/切换时扫描过期项，或用 setTimeout 在写入时埋一个清理任务（注意页面卸载时 clearTimeout）。

• 注意：不要用 setInterval 定期扫，浪费资源且不可靠
• 更推荐「首次访问触发批量清理 + 每次读写按需清理」的混合策略
• 清理操作本身用 localStorage.removeItem，不涉及跨域或权限问题