javascript无法直接控制http缓存，但可通过localstorage、sessionstorage、cache api及版本号策略实现静态资源与运行时数据的缓存管理。
javascript 本身不能直接控制浏览器的 http 缓存（比如强缓存、协商缓存），但可以通过操作客户端存储机制和调整请求方式，实现对页面数据的“缓存式管理”。关键在于区分两类场景：一是静态资源（js/css/图片）的缓存控制，主要靠服务端响应头；二是运行时数据（如 api 结果、用户偏好）的缓存，由 js 主动管理。
用 localStorage 存储结构化数据
适合缓存用户配置、接口返回的 JSON 数据等，数据在关闭浏览器后仍保留。
- 设置缓存：用
localStorage.setItem(key, value)，注意 value 必须是字符串，对象需先JSON.stringify() - 获取缓存：用
localStorage.getItem(key)，拿到后建议用JSON.parse()还原对象 - 带过期时间的封装示例：
const item = { data: value, expire: Date.now() + expiresMs };
localStorage.setItem(key, JSON.stringify(item));
}
function getCache(key) {
const item = localStorage.getItem(key);
if (!item) return null;
const parsed = JSON.parse(item);
if (Date.now() > parsed.expire) {
localStorage.removeItem(key);
return null;
}
return parsed.data;
}
用 sessionStorage 管理会话级缓存
数据仅在当前标签页生命周期内有效，关闭标签即清空，适合临时状态（如表单草稿、导航参数）。
- 写入：
sessionStorage.setItem('tempForm', JSON.stringify(formData)) - 读取：
JSON.parse(sessionStorage.getItem('tempForm') || 'null') - 与 localStorage 语法一致，但自动隔离作用域，无需手动清理
用 Cache API 实现资源级离线缓存
需要配合 Service Worker，适用于 PWA 场景，可缓存 HTML、JS、CSS 等静态资源。
- 注册 Service Worker：
navigator.serviceWorker.register('/sw.js') - 在 sw.js 中打开缓存并预存文件：
caches.open('v1').then(cache => cache.addAll(['/index.html', '/app.js'])) - 拦截 fetch 请求，优先返回缓存：
caches.match(event.request).then(res => res || fetch(event.request)) - 注意：Cache API 只能在 HTTPS 或 localhost 下启用
避免 JS 文件被错误缓存
开发阶段常因 JS 文件缓存导致新代码不生效，可通过动态加版本号解决。
- 构建时注入哈希值（推荐）：
<script src="app.a1b2c3.js"></script> - 开发时追加时间戳或随机数：
<script src="app.js?v=<%=%20Date.now()%20%>"></script> - 纯前端动态加载（慎用）：
document.write('<script src="app.js?'+Math.random()+'"></script>')
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
