localStorage 應(yīng)是家喻戶曉的？但本地存儲(chǔ)這個(gè)家族可遠(yuǎn)不止它。以前扯過 sessionStorage，現(xiàn)在還有個(gè)神奇的 CacheStorage。它用來存儲(chǔ) Response 對(duì)象的。也就是說用來對(duì) HTTP ，響應(yīng)做緩存的。雖然 localStorage 也能做，但是它可能更專業(yè)。
　　CacheStorage 在瀏覽器上的引用名叫 caches 而不是駝峰寫法的 cacheStorage，它定義在 ServiceWorker 的規(guī)范中。CacheStorage 是多個(gè) Cache 的集合，而每個(gè) Cache 可以存儲(chǔ)多個(gè) Response 對(duì)象。
　　廢話不能說再多，下面是 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 上調(diào)用 open 方法就可以異步地得到一個(gè) Cache 對(duì)象的引用。在這個(gè)對(duì)象上我們可以把 Response 對(duì)象 put 進(jìn)去（參數(shù)是一個(gè) URL 和一個(gè) Response 對(duì)象）、用 match 方法取出（傳入一個(gè) URL 取出對(duì)應(yīng)的 Response 對(duì)象）。
　　match 方法不僅可以在 Cache 上調(diào)用 CacheStorage 上也有 match 方法，比如上面例子就打開了兩個(gè) Cache，都寫入一個(gè)叫 /hehe 的 URL。在寫入操作完成之后，到外部的 CacheStorage 上調(diào)用 match 方法來匹配 /hehe，結(jié)果是隨機(jī)的（沒找到這個(gè)規(guī)則在哪里定義的）。
　　雖然上面的例子中只對(duì) Cache 對(duì)象 put 了一個(gè)數(shù)據(jù)，而 Cache 對(duì)象本身可以存放更多的 URL/Response 對(duì)。并且提供了 delete（用戶刪除）、keys（用于遍歷）等方法。但是 Cache 并不像 localStorage 一樣有 clear 方法，如果非要清空一個(gè) Cache，可以直接在 CacheStorage 上把整個(gè) Cache 給 delete 掉再重新 open。
　　這套 API 和 ServiceWorker 一家的，它通常被用于 ServiceWorker 中，整個(gè)設(shè)計(jì)風(fēng)格也和 ServiceWorker 一樣都基于 Promise。

最新評(píng)論