缓存策略的核心是控制请求是否发出，JavaScript通过Map内存缓存、fetch自定义cache模式及localStorage持久化实现业务级缓存，需结合过期机制与缓存键设计。
缓存策略的核心其实是「控制请求是否发出」
JavaScript 本身不提供全局缓存机制，所谓“JS 缓存策略”，本质是开发者在 fetch 或 XMLHttpRequest 发起前，主动判断：这个数据我有没有、还新不新？该不该跳过网络请求？浏览器的 HTTP 缓存（如 Cache-Control）由服务端控制，JS 层能做的，是补充它做不到的事——比如按业务逻辑缓存用户偏好、临时 token、列表页筛选结果等。
用 Map + 时间戳实现轻量级内存缓存
适合短期、单页生命周期内的数据复用，比如搜索建议、用户资料快照。不用引入第三方库，几行就能落地：
const memoryCache = new Map();
<p>function getCachedData(key) {
const item = memoryCache.get(key);
if (!item) return null;
if (Date.now() - item.timestamp > 5 <em> 60 </em> 1000) { // 5 分钟过期
memoryCache.delete(key);
return null;
}
return item.value;
}</p><p>function setCachedData(key, value) {
memoryCache.set(key, {
value,
timestamp: Date.now()
});
}</p>-
Map比Object更适合做缓存键（支持任意类型 key，包括对象引用） - 过期时间写死在代码里容易失控，建议抽成配置项或从响应头读取
max-age - 注意：页面刷新后
Map清空，这不是 bug，是预期行为；要持久化请用localStorage或indexedDB
fetch 配合 cache mode 和自定义缓存键
浏览器原生 fetch 支持 cache 选项，但默认只响应服务端设置的 Cache-Control。想绕过它、强制走 JS 控制逻辑，就得禁用浏览器缓存：
- 设
cache: 'no-store'：每次请求都发出去，JS 自己决定要不要用缓存值 - 设
cache: 'only-if-cached'：仅从 HTTP 缓存取，失败直接 reject（需配合credentials: 'same-origin'等限制） - 缓存键不能只用 URL：带 token 的请求、不同分页参数的列表，URL 相同但内容不同 → 应拼接关键参数生成唯一
cacheKey
示例中避免重复请求同一用户资料：
立即学习“Java免费学习笔记（深入）”；
const userCache = new Map();
<p>async function fetchUser(userId) {
const cacheKey = <code>user:${userId}</code>;
const cached = getCachedData(cacheKey);
if (cached) return cached;</p><p>const res = await fetch(<code>/api/users/${userId}</code>, {
cache: 'no-store' // 不让浏览器插手
});
const data = await res.json();
setCachedData(cacheKey, data);
return data;
}</p>localStorage 缓存要注意序列化和容量限制
适合保存用户设置、离线可用的静态资源路径等低频更新数据。但别把它当数据库用：
-
localStorage.setItem()只接受字符串，必须用JSON.stringify()，取回时要JSON.parse()，失败会静默抛错 - 多数浏览器上限约 5–10MB，单个 key 值超长可能触发
QuotaExceededError - 不同协议/端口/子域名间不共享，
http://a.com和https://a.com是两个独立空间 - 没过期机制，自己加
expires字段并每次读取时校验
简单封装防崩：
function safeSetItem(key, value) {
try {
localStorage.setItem(key, JSON.stringify({
value,
expires: Date.now() + 24 * 60 * 60 * 1000 // 24 小时后过期
}));
} catch (e) {
console.warn('localStorage full or blocked:', e);
}
}
<p>function safeGetItem(key) {
try {
const item = localStorage.getItem(key);
if (!item) return null;
const parsed = JSON.parse(item);
if (parsed.expires && Date.now() > parsed.expires) {
localStorage.removeItem(key);
return null;
}
return parsed.value;
} catch (e) {
console.warn('JSON parse failed for', key, e);
return null;
}
}</p>真正难的不是写几行缓存代码，而是判断哪些数据值得缓、缓多久、失效时怎么通知 UI 更新——这些都得贴着业务来定，没有通用解。
