浏览器根对象window之caches

最新推荐文章于 2023-04-24 17:03:02 发布

weixin_34380296

最新推荐文章于 2023-04-24 17:03:02 发布

阅读量1k

点赞数

原文链接：http://www.cnblogs.com/ndos/p/8261700.html

版权

本文详细介绍了CacheStorage对象，它是浏览器中用于缓存HTTP响应的一种机制。通过使用Cache对象，开发者可以将Response对象存储起来并按需获取，这对于离线应用和服务工作程序(ServiceWorker)尤其有用。

摘要由CSDN通过智能技术生成

在控制台输入window. caches可输出一个叫做CacheStorage的对象，它用来存储 Response 对象的。也就是说用来对 HTTP ，响应做缓存的。虽然 localStorage 也能做，但是它可能更专业。

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

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);

});

首先，在 caches 上调用 open 方法就可以异步地得到一个 Cache 对象的引用。在这个对象上我们可以把 Response 对象 put 进去（参数是一个 URL 和一个 Response 对象）、用 match 方法取出（传入一个 URL 取出对应的 Response 对象）。

match 方法不仅可以在 Cache 上调用 CacheStorage 上也有 match 方法，比如上面例子就打开了两个 Cache，都写入一个叫 /hehe 的 URL。在写入操作完成之后，到外部的 CacheStorage 上调用 match 方法来匹配 /hehe，结果是随机的（没找到这个规则在哪里定义的）。

虽然上面的例子中只对 Cache 对象 put 了一个数据，而 Cache 对象本身可以存放更多的 URL/Response 对。并且提供了 delete（用户删除）、keys（用于遍历）等方法。但是 Cache 并不像 localStorage 一样有 clear 方法，如果非要清空一个 Cache，可以直接在 CacheStorage 上把整个 Cache 给 delete 掉再重新 open。

这套 API 和 ServiceWorker 一家的，它通常被用于 ServiceWorker 中，整个设计风格也和 ServiceWorker 一样都基于 Promise。

转载于:https://www.cnblogs.com/ndos/p/8261700.html