這篇文章主要介紹了JavaScript中的cacheStorage使用詳解,是JavaScript入門學習中的基礎知識,需要的朋友可以參考下

localStorage 應是家喻戶曉的?但本地存儲這個家族可遠不止它。以前扯過 sessionStorage，現在還有個神奇的 CacheStorage。它用來存儲 Response 對象的。也就是說用來對 HTTP ，響應做緩存的。雖然 localStorage 也能做，但是它可能更專業。

CacheStorage 在瀏覽器上的引用名叫 caches 而不是駝峰寫法的 cacheStorage，它定義在 ServiceWorker 的規范中。CacheStorage 是多個 Cache 的集合，而每個 Cache 可以存儲多個 Response 對象。

廢話不能說再多，下面是 demo
 

1. <script> 
2. caches.delete('c1'); 
3. caches.delete('c2'); 
4. Promise.all([ 
5. caches.open('c1').then(function(cache) { 
6. return cache.put('/hehe', new Response('aaa', { status: 200 })); 
7. }), 
8. caches.open('c2').then(function(cache) { 
9. return cache.put('/hehe', new Response('bbb', { status: 200 })); 
10. }) 
11. ]).then(function() { 
12. return caches.match('/hehe'); 
13. }).then(function(response) { 
14. return response.text(); 
15. }).then(function(body) { 
16. console.log(body); 
17. }); 
18. </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。