LocalStorage无法原生实现LRU策略，需手动维护索引数组模拟访问顺序：每次读写将key置顶，超限时从末尾删除最久未用项，并通过封装类统一管理存取与清理逻辑。
LocalStorage 本身不提供自动清理机制，也无法直接实现 LRU（Least Recently Used）淘汰策略。但你可以通过在写入/读取时手动维护访问时间戳和使用顺序，模拟 LRU 行为，并在缓存超限时主动删除最久未用的条目。
核心思路：用元数据+手动调度模拟 LRU
LocalStorage 是键值对字符串存储，不支持原生排序或时间追踪。因此需额外存储两部分信息：
-
实际数据：如
cache:data:xxx -
元数据索引：如
cache:index，保存一个按最近使用时间排序的 key 列表（JSON 数组），每次读/写都更新该列表
当缓存条目数或总大小逼近上限时，从索引末尾（最旧项）开始逐个删除，直到满足容量要求。
关键实现步骤
1. 封装统一的缓存操作类
避免每次手动处理 index 和数据，封装成类似 LruCache 的工具：
- 构造时指定最大条目数（如 100）或最大字节数（如 5MB）
-
set(key, value)：序列化 value → 存入cache:data:key；更新 index 数组（将 key 移至开头，去重）；触发清理检查 -
get(key)：读取 value；若存在，将 key 移至 index 开头（表示“刚刚被用”）；返回解析后的值 -
prune()：遍历 index 末尾，逐个删除对应 data + 更新 index，直到符合容量约束
2. 精确估算 LocalStorage 占用大小
不能只看条目数，因为 value 长度差异大。用 encodeURIComponent(JSON.stringify(value)).length 近似字节数（UTF-8 编码下基本准确）：
- 把每个 key 对应的 size 也记录在
cache:size:key中，或统一存在cache:sizes对象里 - 清理时优先删 size 大且最久未用的项，提升空间回收效率
3. 安全的 index 更新逻辑（防重复/丢失）
index 是数组，频繁 splice/unshift 易出错。推荐做法：
- 读/写 key 时，先
filter掉旧 key，再unshift新 key - 用
try/catch包裹 JSON 操作，防止 index 数据损坏导致整个缓存不可用 - 首次初始化 index 为空数组
[]，避免null或undefined异常
一个极简可运行示例
以下代码可直接在浏览器控制台测试（仅做示意，生产环境请加错误处理和 size 计算）：
立即学习“前端免费学习笔记（深入）”；
class LruCache {
constructor(maxItems = 50) {
this.maxItems = maxItems;
this.indexKey = 'cache:index';
this.getIndex = () => JSON.parse(localStorage.getItem(this.indexKey) || '[]');
this.saveIndex = (arr) => localStorage.setItem(this.indexKey, JSON.stringify(arr));
}
set(key, value) {
const index = this.getIndex();
const newDataKey = `cache:data:${key}`;
// 更新 index：去重 + 置顶
const filtered = index.filter(k => k !== key);
const newIndex = [key, ...filtered];
localStorage.setItem(newDataKey, JSON.stringify(value));
this.saveIndex(newIndex);
// 清理
if (newIndex.length > this.maxItems) {
this.prune();
}
}
get(key) {
const data = localStorage.getItem(`cache:data:${key}`);
if (!data) return undefined;
// 更新访问顺序
const index = this.getIndex().filter(k => k !== key);
this.saveIndex([key, ...index]);
return JSON.parse(data);
}
prune() {
const index = this.getIndex();
while (index.length > this.maxItems) {
const oldKey = index.pop();
localStorage.removeItem(`cache:data:${oldKey}`);
this.saveIndex(index);
}
}
}
// 使用
const cache = new LruCache(3);
cache.set('a', {x:1});
cache.set('b', {x:2});
cache.set('c', {x:3});
cache.get('a'); // 触发 a 置顶 → index 变为 ['a','c','b']
cache.set('d', {x:4}); // 超限，删 'b'
注意事项与优化建议
⚠️ 不要依赖时间戳字段
不要用 Date.now() 存 lastUsed 时间再排序——LocalSorage 无事务，多标签页并发时易导致 index 和时间戳不一致。靠 key 的数组顺序（LIFO 风格）更可靠。
✅ 支持跨标签页同步（可选）
监听 storage 事件，在其他标签页修改缓存时同步更新本页 index，避免脏数据。
✅ 增量清理 + 节流
若一次 prune 要删几十项，可分批执行（如每次删 5 个），避免阻塞主线程；或用 setTimeout 异步延迟清理。
✅ 与业务生命周期结合
例如用户退出登录时清空全部缓存；或按数据类型划分命名空间（user:profile, list:home），便于定向清理。
