Cache Storage API 专为缓存网络请求响应（HTML/CSS/JS/图片/API等）设计，适合大文件与结构化资源；它不替代 localStorage/sessionStorage，而是与之分工协作：前者管资源离线加载，后者管用户数据持久保存。
Cache Storage API 配合 Service Worker 不是用来替代 localStorage 或 sessionStorage 的，它专为缓存网络请求响应（如 HTML、CSS、JS、图片、字体、API 响应等）而设计，尤其适合处理大文件和结构化网络资源。它和本地存储解决的是不同层级的问题：前者管“资源如何离线加载”，后者管“用户数据怎么持久保存”。所以不是“替代”，而是“分工协作”。
为什么 Cache Storage 更适合大文件与网络响应
Cache Storage 存储的是完整的 Request → Response 对，天然支持流式读写、分块传输和二进制内容（如 5MB 图片、10MB 视频片段、PDF 文档），且不受字符串限制；而 localStorage 只能存字符串，大文件需 Base64 编码，体积膨胀约 33%，还易触发内存溢出或同步阻塞主线程。
- Cache Storage 是异步、非阻塞的，基于 Promise，适合处理大资源加载
- 浏览器为其分配独立配额（通常几十 MB 到数百 MB），远高于 localStorage 的 5–10 MB 限制
- 支持按 URL 精确匹配、版本隔离、批量清理，便于管理动态更新的大资源（如用户上传的报告 PDF、课程视频封面图集）
- 可配合 fetch 事件实现“缓存优先 + 后台更新”策略，用户看到的是旧版大文件，后台静默拉取新版并预存，体验无感知
如何缓存大文件（如 PDF、高清图、视频片段）
关键在于控制请求方式与响应校验，避免因超时、中断或 CORS 导致缓存失败：
- 确保服务端对大文件响应头包含
Content-Length和Accept-Ranges: bytes，支持断点续传 - 前端发起请求时使用
cache: 'no-store'避免被 HTTP 缓存干扰，让 SW 完全接管 - 在 install 阶段不直接
addAll大文件（易失败），改用 fetch + put 方式逐个可控缓存：
self.addEventListener('install', event => {
event.waitUntil(
caches.open('assets-v1').then(cache =>
fetch('/reports/annual-2025.pdf')
.then(res => {
if (!res.ok) throw new Error('PDF load failed');
return cache.put(new Request('/reports/annual-2025.pdf'), res);
})
)
);
});
- 对超大资源（如 >50MB 视频），建议拆分为分片请求（如
/video/chunk-001.bin），再统一缓存，便于增量更新和错误重试
如何缓存 API 响应（含 JSON、分页列表、用户数据）
API 不同于静态资源，需区分只读接口与带副作用操作。只读类（GET 请求）可安全缓存，但要注意时效性与请求参数处理：
- 过滤掉带敏感参数（如
?token=xxx）或用户上下文（?user_id=123）的请求，避免缓存污染 - 对确定不变的数据（如地区字典、配置项），用
caches.match(request, { ignoreSearch: true })忽略 query 参数，提升命中率 - 采用 Stale-While-Revalidate 策略：先返回缓存，再 fetch 新数据并更新缓存（适合新闻列表、商品目录）
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
if (event.request.method === 'GET' && url.origin === location.origin && url.pathname.startsWith('/api/')) {
event.respondWith(
caches.match(event.request).then(cached => {
const networkFetch = fetch(event.request).then(res => {
if (res.ok) caches.open('api-v1').then(cache => cache.put(event.request, res.clone()));
return res;
});
return cached || networkFetch;
})
);
}
});
与本地存储协同使用的典型场景
真实项目中两者常共存：Cache Storage 负责“资源层”（用户看到的内容），localStorage / IndexedDB 负责“状态层”（用户做了什么）：
- 用户离线编辑了一份文档草稿 → 存入
localStorage或IndexedDB - 该文档依赖的模板 CSS、图标字体、校验 JS → 由 Cache Storage 预缓存，确保编辑界面始终可用
- 用户点击“提交”，若在线则发 API；若离线，将请求序列化存入 IndexedDB，待联网后由 SW 后台同步
- 提交成功后，服务端返回的新版文档 PDF → SW 拦截响应，存入 Cache Storage，下次打开直接离线查看
