LocalStorage需手动实现动态缓存淘汰:推荐基于过期时间(存时记录expiresAt,读时校验),也可按容量预判清理(优先删过期项,再按updatedAt或LRU策略剔除),最终可封装为支持配置的工具类。

LocalStorage 本身不提供自动缓存淘汰机制,要实现“动态缓存淘汰”,需在写入/读取时主动加入策略逻辑,比如按时间、容量或访问频率控制数据生命周期。
基于过期时间的自动淘汰(推荐)
在存入数据时一并记录有效期(如毫秒时间戳),读取前校验是否过期。这是最常用、最可控的方式。
- 写入时:用对象封装值 + expiresAt 字段,再 JSON.stringify 存入
- 读取时:先解析,检查 expiresAt < Date.now(),过期则移除并返回 null
- 示例:localStorage.setItem('token', JSON.stringify({ value: 'abc123', expiresAt: Date.now() + 60 * 60 * 1000 }))
基于最大容量的主动清理
LocalStorage 通常限制为 5–10MB(因浏览器而异),当接近上限时,可按策略删除旧数据。注意:不能直接监听容量溢出,需手动预判。
- 每次写入前估算当前总大小(可用 Object.keys(localStorage).reduce(...) 粗略计算)
- 超过阈值(如 4.5MB)时,遍历 key,优先删除带 expiresAt 且已过期的项
- 仍不足时,可按写入时间(需额外存 updatedAt 字段)剔除最久未更新的条目
模拟 LRU(最近最少使用)行为
LocalStorage 无内置访问顺序记录,需自行维护一个 key 的访问序列(例如用数组存 key 名,每次读/写后把 key 移到末尾)。
立即学习“Java免费学习笔记(深入)”;
- 将访问序列存在单独 key(如 __lru_order),JSON 存储字符串数组
- 读/写某 key 时,更新该数组:去重 + 推入末尾;超出预设长度则截断开头
- 触发清理时,从数组开头取 key 删除,直到空间足够
- 缺点:增加 I/O 次数,且数组操作在大量 key 下有性能损耗
封装成可复用的缓存工具类
把上述逻辑整合为一个类,统一管理写入、读取、清理,避免重复判断。
- 构造时传入最大容量(字节)、默认过期时间(毫秒)、是否启用 LRU 等配置
- 提供 set(key, value, options?) 和 get(key) 方法,内部自动处理过期与清理
- 暴露 clearExpired() 或 forceCleanup() 供手动调用


















