什么是CacheStorage？

文章目录

[一、什么是 CacheStorage?](#一、什么是 CacheStorage?)
二、基本使用
- [1. 打开/创建缓存](#1. 打开/创建缓存)
- [2. 添加资源到缓存](#2. 添加资源到缓存)
- [3. 匹配缓存请求](#3. 匹配缓存请求)
- [4. 删除缓存](#4. 删除缓存)
三、使用场景
四、注意事项

引言

在当今追求极致用户体验的Web开发领域，性能优化始终是开发者关注的核心问题。而CacheStorage API作为现代浏览器提供的一项强大工具，正逐渐成为构建快速、可靠、离线可用Web应用的关键技术。本文将带您深入理解CacheStorage的工作原理、使用场景和最佳实践。'

一、什么是 CacheStorage?

CacheStorage是浏览器提供的一种持久化存储机制，允许开发者通过JavaScript以编程方式管理缓存资源。它通常与Service Worker结合使用，为PWA（渐进式Web应用）提供离线支持、资源预加载等能力。

核心特性：

异步操作：所有API返回Promise，避免阻塞主线程
多缓存隔离：支持创建多个独立命名的缓存仓库
网络请求级缓存：可缓存完整的HTTP请求/响应
跨域资源支持：需遵守CORS规则

二、基本使用

1. 打开/创建缓存

js 复制代码

caches.open('my-cache-v1').then(cache => {
  console.log('缓存已打开');
});

2. 添加资源到缓存

js 复制代码

cache.addAll([
  '/styles.css',
  '/app.js',
  '/header-logo.png'
]);

3. 匹配缓存请求

js 复制代码

caches.match(request).then(response => {
  if(response) return response;
  return fetch(request);
});

4. 删除缓存

js 复制代码

caches.delete('old-cache-v1').then(success => {
  if(success) console.log('缓存已删除');
});

三、使用场景

离线优先策略
通过Service Worker拦截网络请求，优先返回缓存资源：

js 复制代码

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

关键资源预缓存
在Service Worker安装阶段预加载核心资源：

js 复制代码

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => 
      cache.addAll(['/critical.css', '/main.js']))
  );
});

动态内容缓存

实现类似"阅读后缓存"的模式：

js 复制代码

fetch(articleURL)
  .then(response => 
    caches.open('dynamic-cache').then(cache => 
      cache.put(articleURL, response))
  );

四、注意事项

版本控制
每次更新资源时使用新缓存名称（如my-cache-v2），避免旧缓存污染
缓存策略选择

Cache First → 适合静态资源
Network First → 适合实时数据
Stale-While-Revalidate → 平衡速度与新鲜度

存储限制
浏览器通常限制每个源的缓存空间（约50MB-1GB），需定期清理旧缓存
缓存清理策略

js 复制代码

// 删除所有非当前版本的缓存
caches.keys().then(keys => 
  keys.filter(key => key !== CURRENT_CACHE)
     .forEach(key => caches.delete(key))
);