Cacheをチラッと知ろう
🗽 きっかけ
アップロードした画像をサーバーなどを使わずに一時的に保存したく、localStorageについて調べていたがピンとくる解決方法がなかった。
その時に Cacheを使うと良さそう ということを見つけたのでそのお勉強をしてみた。
localStorageに関する記事は↓
ℹ️ ご案内
以下で書いてます
📣 言語 → TypeScript
🚋 フレームワーク → Nuxt3
🐱 Cacheとは
上記のドキュメントによると
Request / Response オブジェクトのペアを保存するストレージの仕組みを提供します。
🤨
もうちょっと砕いた言い方をすると「このRequestが来たらこのResponseを返してね！」と学習させてから利用する感じっぽい。
というわけで、使ってみる。
🚿 使い方
【結論】急いでいる人向け
最終的にはこんな感じで書いた。
const cache = await caches.open('CACHE_HOGE');
const request = new Request('/cache-hoge');
const response = new Response('ホゲホゲ');
// キャッシュに格納
await cache.put(request, response);
// キャッシュから取得
const matched = await cache.match(request);
const text = await matched.text();
console.log(text);
以下に詳細な手順を書いていく。
1. キャッシュを開く
指定した名前のキャッシュを開く、無い場合は新規作成して開く
const cache = await caches.open('CACHE_HOGE');
2. データの格納
putの引数にはRequestオブジェクトとResponseオブジェクトが入るということでその生成から。
const request = new Request([キーとして設定したい文字列]);
const response = new Response([格納したいもの]);
const cache = await caches.open('CACHE_HOGE');
const request = new Request('/cache-hoge');
const response = new Response('ホゲホゲ');
// キャッシュに格納
await cache.put(request, response);
2(補足). addを使わないわけ
追加するという意味ではadd()が効果的っぽいが、今回はput()を使用。
put()の説明に記載されている以下に注目。
メモ: Cache.add や Cache.addAll は、200 台にない Response.status 値を持つレスポンスをキャッシュしませんが、 Cache.put では、リクエストとレスポンスのペアを格納できます。結果的に、Cache.add や Cache.addAll は不透明なレスポンスを格納するために使用できませんが、 Cache.put では可能です
つまりadd()は キーとして設定したい文字列 に実在するURLを設定しないと勝手に通信に言って404エラーになって動かなくなるがput()は存在しなくてもOK。
今回は存在しないURLを置いているのでput()で対応。
3. 格納したものの取得
match()とtext()を使用して取得するとのこと
const cache = await caches.open('CACHE_HOGE');
const request = new Request('/cache-hoge');
const response = new Response('ホゲホゲ');
// キャッシュに格納
await cache.put(request, response);
// キャッシュから取得
const matched = await cache.match(request);
const text = await matched.text();
console.log(text);
コンソールに「ホゲホゲ」が表示された
ファイルを格納した場合はtext()じゃなくてblob()で取得するなど格納したものによって使用するメソッドが異なるので注意。
🤔 パッと見いい感じだが...
前述の通り、Cacheは Request / Response オブジェクトのペアを保存するストレージの仕組みを提供します。 という説明がされている。
これをちゃんと噛み砕くと
Request → 「このURLにあたるものが欲しい！」「このURLを叩いて得られるものが欲しい！」
Response → 「このURLではこれをプレゼントしますよ〜〜どうぞ〜〜」
となっている。
つまり、ブラウザでやっているURLのアクセスとやっていることが一緒。
この設定はURLがある前提でオフラインになってしまったりアクセスができなかった時に用意しておくイメージ。
なので今回の アップロードした画像をサーバーなどを使わずに一時的に保存したく という要件にそもそも合っていない気がする...
📨 まとめ
Cacheを使った感想としては「できなくはないが、本来の使い方として合っているのか...??」というのが正直なところ。
今回のやりたいこととはズレている気がするが、コンテンツ自体を保持しておきたい時にこのやり方はいい感じだなぁは思った。
ちなみに、データ容量についてはlocalStorageやsessionStorageより大きなデータを格納できる。
容量の計算方法がPCのディスク全体量の60%とのことでPCによって左右されるっぽい。
したがって、本来の使い方とは若干ズレるが大きなデータを保管する場所としては有用ではある、みたいなテンション感かも。
Discussion