HTML5离线存储无自动过期机制，需开发者手动实现：localStorage/sessionStorage须加时间戳校验；Cache API需结合Service Worker按需淘汰；IndexedDB可建时间索引批量清理；推荐分层设计+显式TTL封装。
HTML5 本身没有内置的“自动清理”或“过期策略”机制来管理离线存储数据（如 localStorage、sessionStorage、Cache API、IndexedDB），所有清理和过期逻辑必须由开发者主动实现。
localStorage 和 sessionStorage 不支持自动过期
这两者仅提供键值对的持久/会话级存储，浏览器不会根据时间自动删除数据。若需过期控制，必须手动添加时间戳并每次读取时校验：
- 写入时保存当前时间（如
localStorage.setItem('token', JSON.stringify({ value: 'abc', expires: Date.now() + 3600000 }))） - 读取时先解析，检查
expires是否已过期，过期则清除并返回null - 无法触发全局定时清理，只能在业务逻辑中按需检查（例如每次页面加载或调用
get方法时）
Cache API 可配合 Service Worker 实现缓存淘汰
Cache API 本身也不带过期能力，但可在 Service Worker 中结合请求时间、响应头或自定义规则主动管理：
- 为每个缓存项记录写入时间（通过
cache.put()前注入自定义 header 或元数据） - 在
fetch事件中判断缓存是否“陈旧”，决定是否跳过缓存或发起更新 - 定期在后台（如
periodic sync或用户再次访问时）遍历缓存，删除超时条目（需注意Cache.delete()的异步性与权限） - 更常用的做法是版本化缓存名（如
v2-main-cache），升级时清空旧缓存，避免逐条判断过期
IndexedDB 支持灵活的过期查询与批量清理
作为结构化数据库，IndexedDB 允许建立时间索引，实现高效过期扫描与删除：
立即学习“前端免费学习笔记（深入）”；
- 建表时添加
expiresAt字段，并在该字段上创建 IDBIndex - 使用
openCursor(IDBKeyRange.upperBound(Date.now()))快速定位所有已过期记录 - 在事务中批量删除，避免逐条操作影响性能
- 可封装为独立的
cleanupExpired()方法，在应用启动、空闲时段或特定路由进入时调用
实际建议：分层设计 + 显式生命周期
不要依赖浏览器自动回收，应统一约定数据生命周期：
- 敏感短期数据（如临时 token）优先用
sessionStorage或内存变量，关闭标签即失效 - 长期缓存（如静态资源）用 Cache API + 版本号，避免过期逻辑复杂化
- 用户本地状态类数据（如草稿、偏好）用 IndexedDB 并自带
createdAt/updatedAt字段 - 所有存储操作尽量包装成带 TTL 的工具函数（如
setWithTTL('key', data, 24 * 60 * 60 * 1000)）
不复杂但容易忽略的是：过期不是目的，可控才是关键。把清理逻辑当作业务逻辑的一部分，而不是等待浏览器“帮忙”。
