---

title: Cache Storage 实战：版本化与清理策略

keywords:

• Cache Storage
• caches.open
• 版本化
• 清理
• Cache.match
• Cache.delete

description: 总结 Cache/CacheStorage 的核心操作与版本化清理最佳实践，解释与 HTTPS、安全配额与浏览器清理行为的关系，并给出工程示例与参考。

categories:

• 文章资讯
• 技术教程

---

概述

Cache Storage 为 Request/Response 持久化提供接口，常与 Service Worker 协作。需采用版本化命名并在激活阶段删除旧缓存，避免配额占满与不一致。

核心操作

• caches.open(name)/cache.put(request, response)/cache.match(request)：读写缓存条目。
• caches.keys()/caches.delete(name)：枚举与删除旧版本缓存。
• 仅安全源（HTTPS）可用；浏览器可能在配额紧张时清理整个域缓存［参考1,4］。

版本化与清理

• 在 SW install/activate 中维护 CURRENT_CACHES 映射，激活时删除不在映射中的缓存；示例与最佳实践见 MDN［参考1,5］。
• 结合 HTTP 缓存策略与构建哈希，避免重复缓存旧资源；必要时执行 cache busting。

参考与验证

• ［参考1］MDN 中文：Cache 接口与版本化/删除旧缓存示例与注意事项：https://developer.mozilla.org/zh-CN/docs/Web/API/Cache
• ［参考2］博客：Service Worker 的缓存失效与 busting 策略说明：https://jun711.github.io/web/service-worker-cache-busting/
• ［参考3］MDN 英文：CacheStorage 接口与窗口/worker访问说明：https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage
• ［参考4］MDN 英文：Cache 接口说明（安全源、配额与版本化示例）：https://developer.mozilla.org/en-US/docs/Web/API/Cache

关键词校验

关键词与 Cache Storage 版本化/清理一致。