はじめに
ウェブブラウザのクライアント側には、データを保存するために3つの主要な仕組みがあります。Reactにおける役割で見ていきます。
- SessionStorage
- LocalStorage
- Cookies
LocalStorage
- データの有効期限は永続的
- アクセス方式は
window.localStorage - データサイズは5MBほど
- クライアントのみ送受信
- JSで簡単に取得可能（httpOnly不可）
- セッションとは関連付けられないため、異なるタブ間でデータが共有
SessionStorage
- ウェブブラウザのタブが開かれている間だけデータを保存する仕組み
- データの有効期限はセッション中のみでタブを閉じると削除
- アクセス方式は
window.sessionStorage - データサイズは5MBほど
- クライアントのみ送受信
- JSで簡単に取得可能（httpOnly不可）
Cookie
- ブラウザとサーバー間で共有可能
- 有効期限を設定することができ、指定した有効期限までデータが保持される
- アクセス方式は
document.cookie - データサイズは4KBほど
- サーバーとの送信はリクエストごとに自動送信
- httpOnly設定でJSからアクセス不可（より安全）
どの方法を使用するか
以下は参考資料のZennから引用します。
引用 https://zenn.dev/simsim/articles/3f3e043dd750e8
SessionStorage：一時的なデータの保存に適しており、ページ間での情報の共有が不要な場合に選択されます。
LocalStorage：永続的なデータの保存が必要で、異なるタブ間でデータの共有が必要な場合に選択されます。
Cookies：有効期限を設定して永続的なデータの保存と、異なるセッションや異なるドメイン間でデータの共有が必要な場合に選択されます。
localStorageの使用用途
以下が使用用途になるみたいです。
- ログイン情報の保存（JWT トークンのキャッシュなど）
- ユーザー設定の永続化（ダークモード、言語設定など）
- ブラウザを閉じてもデータを保持したいとき
// データの保存
localStorage.setItem('theme', 'Ohtani');
// データの取得
const theme = localStorage.getItem('theme');
// データの削除
localStorage.removeItem('theme');
SessionStorageの使用用途
- 一時的なデータの保存（フォーム入力の一時保存など）
- タブごとに異なるデータを管理したい場合
- ログインセッション情報の管理
// データの保存
sessionStorage.setItem('username', 'Messi');
// データの取得
const username = sessionStorage.getItem('username');
// データの削除
sessionStorage.removeItem('username');
Cookieの使用用途
ブラウザとサーバーの両方で管理できるデータで、セキュリティを考慮したデータの保存***に向きみたいです。
- 認証情報の保存（httpOnly, Secure設定）
- サーバー側とデータの共有
- セッション管理（ログインセッションなど）
// データの保存（有効期限1日）
document.cookie = "user=ohtani; max-age=86400; path=/";
// データの取得
const cookies = document.cookie.split('; ').find(row => row.startsWith('user=')).split('=')[1];
// データの削除（有効期限を過去に設定）
document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
まとめると
データを長期間保持したい → localStorage
セッションが終了したら削除したい → sessionStorage
サーバーとのデータ連携やセキュリティが必要 → cookie
資料
- ChatGPT