Fetch 本身不提供缓存过期控制，需应用层手动管理：缓存响应数据并记录时间戳，读取时校验是否超时，支持内存、localStorage 或 IndexedDB 等多种存储方式。
Fetch 本身不提供缓存过期控制机制，要实现请求结果的“过期失效”，需在应用层手动管理响应缓存及其生命周期，核心思路是：缓存响应数据 + 记录获取时间 + 使用前校验是否过期。
缓存响应并记录时间戳
发起请求后，把响应数据（如 JSON）和当前时间一起存入内存、localStorage 或 IndexedDB。时间戳用于后续判断是否过期。
- 内存缓存适合单页内短期复用，页面刷新即丢失
- localStorage 适合跨会话保留，但注意存储大小限制和同源策略
- IndexedDB 更适合大量或结构化缓存，支持事务和查询
读取时检查是否过期
下次请求前，先查缓存。若存在且未超时，直接返回缓存结果；否则发起新 fetch 请求。
例如设置 5 分钟过期：
立即学习“Java免费学习笔记（深入）”；
const cacheKey = '/api/user';const cached = localStorage.getItem(cacheKey);
if (cached) {
const { data, timestamp } = JSON.parse(cached);
if (Date.now() - timestamp return data; // 未过期，直接用
}
}
// 过期或无缓存，执行 fetch
封装成可复用的缓存 fetch 函数
把缓存逻辑封装为通用函数，支持自定义过期时间（毫秒）和缓存位置。
- 参数包括 url、options、maxAge（毫秒）、storage（如 localStorage）
- 响应成功后自动缓存，含 status、headers（可选）、json 数据和时间戳
- 对 4xx/5xx 响应也可选择性缓存（如降级兜底），但需谨慎处理
配合服务端 Cache-Control 更可靠
前端缓存只是补充。建议服务端响应头带上 Cache-Control: max-age=300，浏览器会自动处理强缓存；再结合 fetch 的 cache: 'no-store' 或 'default' 控制是否走浏览器缓存。
注意：fetch 的 cache 选项影响的是浏览器 HTTP 缓存，不是 JS 层面的数据缓存。两者可叠加使用，但职责不同——前者由浏览器管理，后者由你控制逻辑与时效。
