localstorage本身不支持自动过期，需手动实现ttl机制：写入时存含expiresat的时间结构体，读取时解析、比对、清理并返回有效值或null。
HTML5 的 localStorage 本身不支持自动过期，所有数据默认永久保存，直到手动清除。要实现“自动过期”的缓存效果，必须在写入和读取环节主动加入时间判断逻辑——本质是用时间戳模拟 TTL（Time-To-Live）机制，不是浏览器原生能力。
写入时带上过期时间戳
存数据不能直接塞字符串或对象，而是封装成含时间信息的结构体：
- 用
Date.now()获取当前毫秒时间，加上预设有效期（如 30 分钟 =30 * 60 * 1000），得到绝对过期时间expiresAt - 把原始值和
expiresAt一起序列化为 JSON 对象再存入，例如：localStorage.setItem('token', JSON.stringify({ value: 'xyz', expiresAt: 1756928520000 })); - 时间单位统一用毫秒，避免时区或精度问题
读取时自动校验并清理
每次调用 getItem 后不能直接返回结果，必须解析 + 判断 + 清理：
- 先用
JSON.parse()解析存储内容；若失败（损坏、非对象等），直接返回null并建议删除该 key - 检查
expiresAt是否存在且为数字，再比对Date.now() > expiresAt - 若已过期，立刻执行
localStorage.removeItem(key)，然后返回null；未过期才返回value
封装成工具函数更可靠
避免重复写校验逻辑，推荐封装两个基础方法：
-
setWithExpiry(key, value, ttlMs)：自动计算expiresAt = Date.now() + ttlMs，再存入 -
getWithExpiry(key)：完成解析、比对、清理全流程，返回有效值或null - 可额外支持默认值、错误降级（比如过期时触发重新登录）、前缀隔离（如
'cache:' + key）等扩展
注意跨标签页与内存缓存优化
localStorage 修改会触发 storage 事件，但仅在其他同源窗口中生效：
- 当前窗口写入后，无法立即感知自己刚存的数据是否已过期，所以每次读取都必须校验
- 其他标签页监听到
storage事件时，也应重新校验对应 key，防止使用脏数据 - 高频读写场景下，可在内存中缓存解析后的对象及时间戳，减少重复 JSON 解析开销
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
