こんにちは!
株式会社Sally エンジニアの haruten です♪
私たち株式会社Sallyでは、マーダーミステリーをスマホやPCで遊べるアプリ「ウズ」や、マーダーミステリーを制作してウズ上で公開・プレイできるエディターツール「ウズスタジオ」などを開発・運営しています。
今回はCookieやLocalStorageなどのクライアントサイドストレージについて学び直す機会があったので、その備忘録です！
1. 発端
ウズスタジオでは、マーダーミステリーで使用する画像や音声などのアップロードが可能です。
しかし、これらのメディアファイルは権限のないユーザーは閲覧ができないように毎回署名付きURLを発行しています。そのため、一度別ページで表示した画像であっても再度URLを取得する必要があり、画像を表示する際にローディングUIが毎回表示され、ユーザー体験が低下してしまう問題が稀に起きていました。
そこで対策として、取得したURLをキャッシュすることにしました。
様々なキャッシュ方法が候補としてありましたが、今回はフロントエンドのみで解決し、ライブラリに依存せず軽量に実装できる点を重視して、クライアントサイドストレージを利用したキャッシュ方式を採用しました。
ただし、クライアントサイドストレージには複数の種類があり、それぞれに特徴があるため、改めてそれらを調査してみました。
2. クライアントサイドストレージ
Cookie
容量: 約4KB程度
寿命: 有効期限を設定可能（期限切れまで保存）、期限未設定ならセッション終了時（ブラウザ閉じるまで）
特徴: HTTPリクエスト時に自動でサーバーに送信されるため、ユーザー認証やセッション管理、トラッキングに利用される。
用途例: ログインセッション管理、ユーザートラッキング、Cookieベースの認証
jsでの使用例
document.cookie = "key=value; path=/; max-age=86400;
LocalStorage
容量: 約5MB（ブラウザによるがCookieより大容量）
寿命: ブラウザを閉じてもデータが残る永続的ストレージ
特徴: 同一オリジン内のすべてのウィンドウやタブで共有される。サーバーには自動送信されない。
用途例: ユーザー設定の保存、テーマや表示設定、軽量なキャッシュデータ
jsでの使用例
localStorage.setItem('username', 'JohnDoe');
SessionStorage
容量: 約5MB
寿命: ブラウザのタブやウィンドウを閉じるまでの一時的な保存
特徴: タブ単位で独立したストレージ。別のタブやウィンドウとは共有されない。サーバーには自動送信されない。
用途例: 一時的なセッションデータ、入力フォームの保存、ページ間の一時情報共有
jsでの使用例
sessionStorage.setItem('username', 'JohnDoe');
IndexedDB
容量: 数百MBから数GBまで扱える（ブラウザ制限内）
寿命: 永続的にデータ保存可能
特徴: トランザクション対応のNoSQL型データベース。複雑な構造化データやバイナリデータの保存、検索、更新が可能。非同期処理でパフォーマンス良好。
用途例: オフライン対応アプリ、大容量データ、複雑な検索を伴うアプリケーション、ゲームのローカルデータ管理
jsでの使用例
const request = indexedDB.open('MyDB', 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains('keyval')) {
db.createObjectStore('keyval');
}
};
request.onsuccess = (event) => {
const db = event.target.result;
const tx = db.transaction('keyval', 'readwrite');
const store = tx.objectStore('keyval');
store.put('someData', 'key');
tx.oncomplete = () => {
console.log('保存完了');
};
tx.onerror = () => {
console.error('保存失敗');
};
};
3. 選択のポイント
今回の選定のポイントは以下の2点でした。
① セッション終了時に削除されてほしい
② 画像枚数に応じて容量も大きくなるため数MB程度以上の容量がほしい
以上の理由から非永続かつ5MB程度の容量があるSessionStorageを今回は選択しました。
4. まとめ
今回は画像等のURL取得による読み込み遅延を改善するため、クライアントサイドストレージでのキャッシュを検討しました。
クライアントサイドストレージには、それぞれ特徴やメリット・デメリットがあルため、用途や要件に応じて最適なものを選ぶことが大切です。
似たような課題でお悩みの開発者の方や、キャッシュの実装に興味がある方のお役に立てれば幸いです。
Discussion