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){
returncache.put('/hehe',newResponse('aaa',{status:200}));
}),
caches.open('c2').then(function(cache){
returncache.put('/hehe',newResponse('bbb',{status:200}));
})
]).then(function(){
returncaches.match('/hehe');
}).then(function(response){
returnresponse.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。