JavaScriptでのcacheStorageの使い方を詳しく解説_基礎知識

WBOY
リリース: 2016-05-16 15:48:12
オリジナル
2934 人が閲覧しました

localStorage はよく知られた名前であるべきですか?しかし、ローカル ストレージ ファミリーにはそれ以上のものがあります。以前 sessionStorage について説明しましたが、魔法の CacheStorage も登場しました。 Response オブジェクトを保存するために使用されます。つまり、HTTP 応答をキャッシュするために使用されます。 localStorage でも実行できますが、おそらくより特殊です。
ブラウザでの CacheStorage への参照は、ServiceWorker 仕様で定義されているキャメル ケースでは、cacheStorage ではなくキャッシュと呼ばれます。 CacheStorage は複数の Cache のコレクションであり、各 Cache は複数の Response オブジェクトを格納できます。
これ以上ナンセンスではありません。これがデモです

<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>
ログイン後にコピー

まず、キャッシュの open メソッドを呼び出して、Cache オブジェクトへの参照を非同期に取得します。このオブジェクトでは、Response オブジェクト (パラメーターは URL と Response オブジェクト) を配置し、match メソッドを使用してそれを取得できます (URL を渡し、対応する Response オブジェクトを取得します)。
match メソッドは Cache 上で呼び出すことができるだけでなく、CacheStorage 上でも match メソッドを呼び出すことができます。たとえば、上記の例では、2 つの Cache が開かれ、/hehe という URL がそれらに書き込まれます。書き込み操作が完了すると、/hehe と一致するように外部 CacheStorage で match メソッドが呼び出されます。結果はランダムです (このルールが定義されている場所が見つかりません)。
上記の例では Cache オブジェクトにデータを 1 つだけ格納しますが、Cache オブジェクト自体にはさらに多くの URL/応答ペアを格納できます。また、削除 (ユーザーの削除) やキー (トラバーサル用) などのメソッドを提供します。ただし、Cache には localStorage のような明確なメソッドがありません。キャッシュをクリアする必要がある場合は、CacheStorage 上のキャッシュ全体を直接削除して再度開くことができます。
この API セットは通常 ServiceWorker で使用されるもので、全体の設計スタイルも ServiceWorker と同様に Promise に基づいています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート