CacheStorage 只能存储完整的 Request–Response 对，需用 caches.open() 创建命名缓存（如"api-cache-v1"），fetch 后通过 cache.put() 手动写入；读取时用 cache.match() 匹配请求，支持 ignoreSearch 等选项；Service Worker 中可在 fetch 事件里自动缓存 GET 类 API 请求。
可以直接用 CacheStorage 存储 API 响应，但要注意它只存完整的 Request–Response 对，不能像 localStorage 那样存任意 JSON 或字符串。关键在于：先发起请求拿到 Response，再用 cache.put() 手动写入缓存。
创建并打开缓存空间
所有操作都基于 caches 全局对象，用 caches.open() 获取或新建一个命名缓存：
- 缓存名是字符串，比如
"api-cache-v1"，建议带版本号便于后续清理 - 该方法返回 Promise，需 await 或 .then() 处理
- 同一个域名下可存在多个独立缓存，互不干扰
手动缓存 API 响应（推荐方式）
因为 cache.add() 只支持 GET 请求且会自动发起网络请求，不适合控制时机的 API 缓存；更稳妥的是 fetch 后用 cache.put()：
- 先调用
fetch(url)获取响应体 - 确保响应未被读取过（
response.clone()可复用一次响应） - 构造原始请求对象（如
new Request(url)），传给cache.put(request, response) - 注意：
Response必须是“可消费”的，比如未调用过json()或text()
读取和匹配缓存数据
查缓存不是直接 get key-value，而是用请求去“匹配”已存的 Request：
-
cache.match(new Request(url))返回匹配的ResponsePromise - 匹配依据包括 URL、method、headers 等，若需宽松匹配，可用
match()的ignoreSearch或ignoreVary选项 - 拿到
Response后，仍需调用.json()或.text()解析内容
配合 Service Worker 实现自动缓存（进阶）
如果希望页面加载时自动缓存某些接口，需在 Service Worker 的 fetch 事件中拦截请求：
- 判断请求是否为 API（例如 URL 包含
/api/） - 先尝试
caches.match()，命中则直接返回；未命中则 fetch 并cache.put()写入 - 注意避免缓存敏感请求（如 POST、带认证头的请求），Cache Storage 默认不支持非 GET 缓存
