CookieやSessionStorage、LocalStorageなどについて

Web開発において、データをユーザーのブラウザに保存する方法として「Cookie」「SessionStorage」「LocalStorage」の3つがよく使われます。これらは一見似ているようで、それぞれ異なる特徴と使いどころがあり、適切な選択が重要です。今回は、それぞれの仕組みや特長、使い分けについて解説します。

1. Cookie

Cookieは、Webサーバーがブラウザに対してデータを保存させる仕組みで、特にセッション管理やユーザー識別に利用されます。Cookieは、HTTPリクエストと共にサーバーに送信されるため、サーバー側の処理にデータを渡すことが可能です。

特徴

サーバーとクライアントでデータを共有：Cookieはサーバーとブラウザの間で送受信されるため、認証情報やトラッキングなどに利用されます。
有効期限を設定できる：CookieにはExpiresやMax-Age属性で期限が設定可能です。期限が切れると自動で削除されます。
サイズ制限：Cookieは各Cookieにつき4KBまでのデータを保持できます（サイトごとにおおよそ20個まで保存可能）。

用途

ユーザーのログイン状態の保持（セッション管理）
トラッキングや広告のターゲティング

実装例

javascriptコードをコピーする// Cookieにデータを保存
document.cookie = "username=John Doe; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

// Cookieのデータを取得
let cookies = document.cookie;
console.log(cookies);

2. SessionStorage

SessionStorageは、ブラウザのタブごとにセッション単位でデータを保存する方法です。同一タブ内でのみデータが共有され、タブやウィンドウを閉じるとデータは削除されます。

特徴

タブごとにデータが独立：同じサイトでも異なるタブ間でデータが共有されません。
一時的な保存：タブやウィンドウを閉じるとデータが自動的に削除されます。
容量が比較的多い：5~10MB程度までのデータが保存可能（ブラウザによる差異があります）。

用途

一時的なフォームデータの保持
現在のページでの一時的なユーザー設定（例: フィルター設定）

実装例

javascriptコードをコピーする// SessionStorageにデータを保存
sessionStorage.setItem("username", "John Doe");

// SessionStorageからデータを取得
let user = sessionStorage.getItem("username");
console.log(user);

// データの削除
sessionStorage.removeItem("username");

3. LocalStorage

LocalStorageは、ブラウザにデータを長期的に保存できる方法です。ユーザーがデータを手動で削除しない限り残り続け、同一オリジンであればどのタブやウィンドウからでもアクセスできます。

特徴

長期的なデータ保存：ブラウザを閉じたり再起動してもデータは残ります。
同一オリジン間でデータを共有：異なるタブやウィンドウ間でも同じオリジンのデータを共有できます。
容量が比較的多い：通常5MB以上の容量（ブラウザによる差異があります）。

用途

ユーザー設定の保持（例: ダークモードのオン/オフ設定）
アプリケーションデータのキャッシュ

実装例

javascriptコードをコピーする// LocalStorageにデータを保存
localStorage.setItem("username", "John Doe");

// LocalStorageからデータを取得
let user = localStorage.getItem("username");
console.log(user);

// データの削除
localStorage.removeItem("username");

4. 使い分けのポイント

保存方法	データ保持期間	データサイズ	特徴
Cookie	サーバー側で設定した期限まで	4KB	サーバーとの通信で送受信可能
SessionStorage	ブラウザのタブを閉じるまで	5〜10MB	タブごとにデータが独立
LocalStorage	半永久的（ユーザーが削除まで）	5MB以上	同一オリジン間でデータを共有