JavaScript CacheStorage API 详解与 ServiceWorker 缓存操作

CacheStorage 简介与基本概念

提到本地存储，大家首先想到的往往是 localStorage，但浏览器提供的本地存储方案远不止于此。除了之前讨论过的 sessionStorage，还有一个功能更为专业的 API：CacheStorage。它的主要用途是存储 Response 对象，即对 HTTP 响应进行缓存。虽然 localStorage 也能实现类似的数据持久化，但 CacheStorage 在处理网络请求缓存方面具有更专业的能力。 在浏览器环境中，CacheStorage 的全局引用名为 caches（注意是小写，而非驼峰命名的 cacheStorage），该接口定义在 ServiceWorker 规范中。CacheStorage 本质上是多个 Cache 对象的集合，而每一个 Cache 实例又可以存储多个 Response 对象。 接下来通过具体代码示例进行演示。

<script>
caches.delete('c1');
caches.delete('c2');
Promise.all([
 caches.open('c1').then(function(cache) {
  return cache.put('/hehe', new Response('aaa', { status: 200 }));
 }),
 caches.open('c2').then(function(cache) {
  return cache.put('/hehe', new Response('bbb', { status: 200 }));
 })
]).then(function() {
 return caches.match('/hehe');
}).then(function(response) {
 return response.text();
}).then(function(body) {
 console.log(body);
});
</script>

首先，调用 caches 上的 open 方法，可以异步获取一个 Cache 对象的引用。在该对象上，可以使用 put 方法存入数据（参数包括一个 URL 和一个 Response 对象），或者使用 match 方法取出数据（传入一个 URL 以获取对应的 Response 对象）。 需要注意的是，match 方法既可以在 Cache 对象上调用，也可以在 CacheStorage 对象上调用。例如，在上述示例中打开了两个 Cache 实例，并向它们都写入了名为 /hehe 的 URL。在写入操作完成后，如果在外部的 CacheStorage 上调用 match 方法来匹配 /hehe，返回结果是不确定的（目前尚未找到明确定义此行为的规范规则）。 尽管上述示例中仅向 Cache 对象 put 了一个数据项，但 Cache 对象本身支持存储更多的 URL/Response 键值对，并提供了 delete 方法用于删除特定条目，以及 keys 方法用于遍历所有缓存的 URL。与 localStorage 不同，Cache 对象没有提供 clear 方法来清空所有数据。如果必须清空一个 Cache，可以在 CacheStorage 上直接调用 delete 方法删除整个 Cache 实例，然后重新调用 open 方法创建新的 Cache。 这套 API 与 ServiceWorker 紧密相关，通常应用于 ServiceWorker 环境中。其整体设计风格与 ServiceWorker 一致，均基于 Promise 进行异步操作。