当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript缓存技巧与策略详解

JavaScript缓存技巧与策略详解

2026-01-16 18:54:41 0浏览收藏

你在学习文章相关的知识吗？本文《JavaScript缓存实现与策略解析》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

缓存应按需选择localStorage（持久但阻塞）、sessionStorage（会话级）或内存对象（快但易泄漏）；需手动加TTL防失效，LRU用Map实现更可靠；敏感、非幂等、实时性高数据不应缓存。

JavaScript中如何实现缓存_缓存策略有哪些

缓存该存在哪？localStorage、sessionStorage 和内存对象各有什么坑

JavaScript 中没有“内置缓存机制”，所谓缓存全靠你自己选地方存。最常用的是 localStorage、sessionStorage 和纯内存对象（比如 const cache = new Map()），但它们行为差异极大：

localStorage 持久化，跨页面/刷新存活，但只能存字符串，且有容量限制（通常 5–10MB），写入会阻塞主线程；序列化大对象时容易触发 QuotaExceededError
sessionStorage 仅限当前 tab 生命周期，关掉就丢，同样只支持字符串，不跨 tab 共享，适合临时会话级缓存
内存对象（如 Map 或普通 Object）最快，无序列化开销，但页面刷新即清空；若缓存大量数据，可能引发内存泄漏——尤其监听了未解绑的事件或闭包持有 DOM 引用时

怎么加过期时间？手动维护 TTL 是最常见也最容易出错的方式

浏览器原生存储都不带自动过期，必须自己加时间戳字段。常见错误是只存值，不存时间，或者用 Date.now() 存但没在读取时校验：

const cache = new Map();
<p>function setWithTTL(key, value, ttlMs = 5 <em> 60 </em> 1000) {
cache.set(key, {
value,
expiresAt: Date.now() + ttlMs
});
}</p><p>function get(key) {
const item = cache.get(key);
if (!item) return undefined;
if (Date.now() > item.expiresAt) {
cache.delete(key);
return undefined;
}
return item.value;
}</p>

别用 setTimeout 清理过期项——页面后台或休眠时定时器会不准，且无法覆盖所有 key
如果用 localStorage，记得每次 setItem 前 JSON.stringify，读取后 JSON.parse，否则时间戳会变成字符串导致比较失效
TTL 单位务必统一：后端返回的过期时间可能是秒（expires_in: 300），前端代码里却当毫秒用，缓存立刻失效

LRU 缓存怎么手写？Map 的插入顺序特性是关键

当缓存容量有限（比如最多存 100 条），LRU（Least Recently Used）是最实用策略。JavaScript 的 Map 保证迭代顺序为插入顺序，正好用来模拟访问序：

class LRUCache {
  constructor(maxSize = 100) {
    this.cache = new Map();
    this.maxSize = maxSize;
  }
<p>get(key) {
if (!this.cache.has(key)) return undefined;
const value = this.cache.get(key);
this.cache.delete(key); // 移到末尾 → 最近使用
this.cache.set(key, value);
return value;
}</p><p>set(key, value) {
if (this.cache.has(key)) {
this.cache.delete(key);
} else if (this.cache.size >= this.maxSize) {
this.cache.delete(this.cache.keys().next().value); // 删除第一个（最久未用）
}
this.cache.set(key, value);
}
}</p>

别用 Object 实现 LRU：ES2015+ 虽然规定对象属性遍历顺序，但不如 Map 明确可靠，且删除首属性要遍历 keys，性能差
注意 this.cache.keys().next().value 是获取第一个 key 的标准写法，不是 this.cache.keys().next()（后者返回的是迭代器对象）
如果需要支持异步操作（如缓存 Promise 结果），set 时直接存 Promise，get 时不做 await，由调用方决定是否等待——避免重复触发请求