JavaScript中的cacheStorage使⽤详解

CacheStorage 是 Web Storage API 的一部分，它提供了一种在客户端存储 HTTP 响应的方式，以便在离线时能够再次访问这些响应。CacheStorage 对象是使用 window.caches 属性访问的。

CacheStorage API 允许你创建新的缓存或获取现有的缓存，并使用其中的资源。你可以通过添加新的响应到缓存中，或者从缓存中获取已有的响应。这对于离线应用特别有用，因为你可以在客户端存储网页或应用资源，以便在离线时能够访问它们。

下面是一些基本的 CacheStorage 使用示例：

创建新的缓存：

javascript

let cache = caches.open('my-cache');

添加资源到缓存：

javascript

cache.put('/my-resource', new Response('Hello, world!'));

从缓存中获取资源：

javascript

cache.get('/my-resource').then(response => {

  console.log(response.text()); // 输出 'Hello, world!'

});

删除缓存：

javascript

cache.delete('/my-resource');

清除所有缓存：

javascript

caches.delete('my-cache');

需要注意的是，CacheStorage API 在不同浏览器中的支持程度可能会有所不同。在使用时，最好先检查该 API 是否在目标浏览器中可用，以确保代码的健壮性。

CacheStorage 在浏览器上的引⽤名叫 caches ⽽不是驼峰写法的 cacheStorage，它定义在 ServiceWorker 的规范中。CacheStorage 是多个 Cache 的集合，⽽每个 Cache 可以存储多个 Response 对象。

废话不能说再多，下⾯是 demo

<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('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 对象的引⽤。在这个对象上我们可以把 Response 对象put 进去（参数是⼀个 URL 和⼀个 Response 对象）、⽤ match ⽅法取出（传⼊⼀个 URL 取出对应的 Response 对象）。 match ⽅法不仅可以在 Cache 上调⽤ CacheStorage 上也有 match ⽅法，⽐如上⾯例⼦就打开了两个 Cache，都写⼊⼀个叫 /hehe 的 URL。在写⼊操作完成之后，到外部的 CacheStorage 上调⽤ match ⽅法来匹配 /hehe，结果是随机的（没找到这个规则在哪⾥定义的）。