JavaScript中的cacheStorage使用详解_JavaScript

JavaScript中的cacheStorage使用详解

localstorage 应是家喻户晓的？但本地存储这个家族可远不止它。以前扯过 sessionstorage，现在还有个神奇的 cachestorage。它用来存储 response 对象的。也就是说用来对 http ，响应做缓存的。虽然 localstorage 也能做，但是它可能更专业。
　　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('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，结果是随机的（没找到这个规则在哪里定义的）。
　　虽然上面的例子中只对 cache 对象 put 了一个数据，而 cache 对象本身可以存放更多的 url/response 对。并且提供了 delete（用户删除）、keys（用于遍历）等方法。但是 cache 并不像 localstorage 一样有 clear 方法，如果非要清空一个 cache，可以直接在 cachestorage 上把整个 cache 给 delete 掉再重新 open。
　　这套 api 和 serviceworker 一家的，它通常被用于 serviceworker 中，整个设计风格也和 serviceworker 一样都基于 promise。