JavaScript中的cacheStorage使用詳解
localStorage 應(yīng)是家喻戶曉的?但本地存儲(chǔ)這個(gè)家族可遠(yuǎn)不止它。以前扯過(guò) sessionStorage,現(xiàn)在還有個(gè)神奇的 CacheStorage。它用來(lái)存儲(chǔ) Response 對(duì)象的。也就是說(shuō)用來(lái)對(duì) HTTP ,響應(yīng)做緩存的。雖然 localStorage 也能做,但是它可能更專業(yè)。
CacheStorage 在瀏覽器上的引用名叫 caches 而不是駝峰寫法的 cacheStorage,它定義在 ServiceWorker 的規(guī)范中。CacheStorage 是多個(gè) Cache 的集合,而每個(gè) Cache 可以存儲(chǔ)多個(gè) Response 對(duì)象。
廢話不能說(shuō)再多,下面是 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 方法來(lái)匹配 /hehe,結(jié)果是隨機(jī)的(沒(méi)找到這個(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。
相關(guān)文章
簡(jiǎn)介JavaScript中fixed()方法的使用
這篇文章主要介紹了JavaScript中fixed()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06詳解JavaScript正則表達(dá)式中的global屬性的使用
這篇文章主要介紹了詳解JavaScript正則表達(dá)式中的global屬性的使用,是JS學(xué)習(xí)進(jìn)階中的重要知識(shí)點(diǎn),需要的朋友可以參考下2015-06-06一篇文章告訴你JavaScript的作用域和函數(shù)該這樣理解
這篇文章主要為大家詳細(xì)介紹了JavaScript的作用域和函數(shù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-02-02Javascript中的數(shù)學(xué)函數(shù)
Javascript中的數(shù)學(xué)函數(shù)...2007-04-04