JavaScript无法直接操作HTTP缓存，但可通过Cache API、localStorage等机制间接管理缓存。1. 使用Service Worker配合Cache API可缓存静态资源，实现离线访问；2. 利用localStorage存储API数据并设置过期时间，减少重复请求；3. 静态资源依赖HTTP缓存头如Cache-Control，结合文件哈希名控制更新；4. API数据根据更新频率设置TTL或通过WebSocket通知失效；5. 用户敏感数据建议用sessionStorage或内存缓存以提升安全性；6. 离线场景优先采用Cache API预加载关键资源。合理组合HTTP缓存与客户端存储，平衡性能与数据一致性，提升用户体验。
JavaScript 本身不能直接操作浏览器的 HTTP 缓存（如强缓存、协商缓存），但可以通过控制请求方式、配合服务端设置和使用现代 Web API 来实现对缓存的有效管理和策略设计。合理利用这些机制，可以显著提升页面性能和用户体验。
理解浏览器缓存机制
浏览器缓存分为两类：
- HTTP 缓存：由响应头字段控制，比如 Cache-Control、Expires、ETag、Last-Modified。这类缓存由浏览器自动处理，JavaScript 无法直接读写。
- 客户端存储缓存：可通过 JavaScript 主动操作，如 localStorage、sessionStorage、IndexedDB 和 Cache API（Service Worker 配合使用）。
要“操作缓存”，实际是指通过 JavaScript 管理客户端存储或影响网络请求行为。
使用 Cache API 实现资源缓存
Cache API 允许 JavaScript 存储网络请求和响应对象，常用于 PWA 和离线应用。它需要在 Service Worker 中使用，也可以在主线程中调用（受限更多）。
示例：在 Service Worker 中缓存静态资源
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache => {
return cache.addAll([
'/',
'/index.html',
'/style.css',
'/app.js'
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
这样可以在离线时返回已缓存的资源，实现可控的缓存策略。
利用 localStorage 管理数据缓存
对于接口数据或用户配置，可使用 localStorage 进行简单缓存。
示例：缓存 API 响应并设置过期时间
function getCachedData(key, ttl = 300000) { // 默认 5 分钟
const cached = localStorage.getItem(key);
if (!cached) return null;
const { data, timestamp } = JSON.parse(cached);
if (Date.now() - timestamp > ttl) {
localStorage.removeItem(key);
return null;
}
return data;
}
function setCachedData(key, data) {
const record = {
data,
timestamp: Date.now()
};
localStorage.setItem(key, JSON.stringify(record));
}
// 使用
async function fetchData() {
const cacheKey = 'userProfile';
let data = getCachedData(cacheKey);
if (data) {
return data;
}
data = await fetch('/api/profile').then(r => r.json());
setCachedData(cacheKey, data);
return data;
}
这种方式适合缓存不频繁更新的数据，避免重复请求。
设计合理的缓存策略
结合不同场景选择合适的缓存方式：
- 静态资源（JS/CSS/图片）：依赖 HTTP 缓存，设置长期 Cache-Control: max-age=31536000，配合内容哈希名（如 app.a1b2c3.js）实现更新。
- API 数据：使用 JavaScript 控制缓存生命周期，根据数据变化频率设置 TTL，或结合 WebSocket 实现失效通知。
- 用户敏感数据：避免使用 localStorage，优先考虑内存缓存或短期 sessionStorage，注意安全。
- 离线支持：使用 Service Worker + Cache API 预缓存关键资源，实现离线访问。
缓存命中能减少请求、降低延迟，但也要防止陈旧数据。建议为关键
操作提供手动刷新机制，并监控缓存命中率。
基本上就这些。关键是区分资源类型，组合使用 HTTP 缓存和 JavaScript 可控缓存，做到性能与一致性平衡。
