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 に基づいています。