LocalStorage本身不支持自动过期，需手动存储时间戳和过期时间并读取时校验；过期则删除并返回null，未过期返回原始数据；可封装为set/get工具类，但依赖客户端时间且无后台清理。
LocalStorage 本身不支持自动过期，但可以通过在存储数据时附带时间戳，并在读取时检查是否过期，来模拟“带有效期”的缓存逻辑。关键在于手动维护过期判断，而不是依赖浏览器机制。
存储时写入时间戳和过期时间
把原始数据和元信息（如写入时间、有效毫秒数）一起序列化为对象再存入 LocalStorage：
- 例如：要缓存用户信息并设置 10 分钟有效期，可这样存：
const data = { name: "张三", avatar: "/img/1.png" };
const ttlMs = 10 * 60 * 1000; // 10分钟
const item = {
value: data,
timestamp: Date.now(),
expiresAt: Date.now() + ttlMs
};
localStorage.setItem("user_profile", JSON.stringify(item));
读取时校验是否过期
每次 getItem 后先解析，再比对当前时间与 expiresAt：
- 若已过期，主动删除并返回
null，避免后续误用 - 若未过期，返回
value字段内容
function getWithExpiry(key) {
const itemStr = localStorage.getItem(key);
if (!itemStr) return null;
<p>const item = JSON.parse(itemStr);
if (Date.now() > item.expiresAt) {
localStorage.removeItem(key);
return null;
}
return item.value;
}</p><p>// 使用
const profile = getWithExpiry("user_profile"); // 过期则返回 null，否则返回原始数据</p>封装成易用的工具类（可选增强）
把逻辑收拢，支持更自然的 API，比如 set(key, value, ttlMs) 和 get(key)：
立即学习“前端免费学习笔记（深入）”；
- 内部统一处理序列化、时间戳、过期检查
- 可增加默认 TTL（如 5 分钟），调用时省略
ttlMs参数即使用默认值 - 注意：不要覆盖原生
localStorage对象，建议新建一个工具对象
注意事项和边界情况
实际使用中需留意几个细节：
- 时钟依赖：完全依赖客户端系统时间，若用户手动改时间，可能导致误判（提前过期或延迟过期）
- 无后台清理：过期数据只在读取时清理；长期不访问的过期项会一直占空间，可配合定期清理策略（如启动时扫描）
- 大对象慎用：LocalStorage 有容量限制（通常 5–10MB），且是同步阻塞操作，频繁读写大数据会影响页面响应
- 同源限制：协议、域名、端口任一不同即隔离，无法跨域共享
