JavaScript无法直接控制HTTP缓存，需用localStorage/sessionStorage/Map等本地缓存主动管理接口数据：localStorage+时间戳实现持久化缓存，Map实现内存级函数缓存，Proxy可封装透明缓存逻辑。
JavaScript 本身不能直接控制浏览器对接口请求的 HTTP 缓存（比如 Cache-Control 或 ETag），因为这些由服务端响应头决定，前端只能被动接受。但你可以主动配合——用本地缓存（如 localStorage、sessionStorage 或 Map）接管数据生命周期，在网络请求前先查本地、命中则跳过请求，从而真正避免重复发起网络交互。
区分两类缓存：HTTP 缓存管资源，本地缓存管数据
静态资源（JS/CSS/图片）走 HTTP 强缓存，靠服务端设置 Cache-Control: max-age=31536000 等头实现；而接口返回的是动态 JSON 数据，浏览器默认不缓存（尤其 POST/PUT），也不支持协商缓存（If-None-Match 对大多数 API 无效）。所以必须自己用 JS 管理数据缓存：
-
HTTP 缓存不可控：你写
fetch('/api/user')，浏览器不会自动缓存响应体，除非后端明确返回Cache-Control: public, max-age=60且请求是 GET、无 Cookie 等严格条件 - 本地缓存可编程：你决定什么数据缓、缓多久、何时失效、是否跨页面生效——这才是接口层防重复请求的主战场
用 localStorage + 时间戳做持久化数据缓存
适合配置项、用户信息、菜单、新闻列表等更新频率低、容忍短时旧数据的场景。关键不是“存”，而是“带有效期地存+带校验地取”：
- 请求前拼出唯一 key（如
cache_user_123），读取 localStorage 中对应字符串 - 解析后检查
expires字段是否大于Date.now()，过期则忽略 - 未命中或过期时发请求，成功后把
{ data, expires: Date.now() + 5 * 60 * 1000 }序列化存入 - 注意：对象必须
JSON.stringify()，localStorage 只存字符串；敏感数据改用sessionStorage防跨标签泄露
用 Map 做内存级函数缓存（Memoization）
适合参数确定、结果稳定、无需跨页面保留的场景，比如封装一个 getUser(id) 函数，多次调用同一 id 不触发新请求：
立即学习“Java免费学习笔记（深入）”；
- 创建全局
const userCache = new Map() - 函数执行前查
userCache.has(id)，有则直接返回userCache.get(id) - 无则请求，成功后
userCache.set(id, data)，可选加 TTL 定时清理 - 优势是零序列化开销、无跨域限制、支持任意类型键（如对象参数可转为 JSON 字符串作 key）
结合 Proxy 实现透明缓存代理
想让缓存逻辑对业务代码无感？可以用 Proxy 包一层原始请求函数，拦截调用并自动查存/回填：
- 定义
createCachedProxy(fetchFn, keyGen)，其中keyGen根据 URL 和参数生成唯一缓存 key - 在
apply拦截器中优先从 localStorage 读，命中则return JSON.parse(cached) - 未命中则执行原函数，成功后写入 localStorage 并返回结果
- 这样
cachedGetUser(123)外表和普通函数一样，内部却自带缓存开关
