🌊

ReactにおけるLocalStorage SessionStorage Cookieの違いと使い分け

に公開
Next.js
React
TypeScript
cookie
tech

はじめに

ウェブブラウザのクライアント側には、データを保存するために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

資料

https://zenn.dev/simsim/articles/3f3e043dd750e8

  • ChatGPT

補足

2025年02月08日にQiitaで投稿

Discussion