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

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