[Medium] 📄 cookie, sessionStorage, localStorage

比較

属性	cookie	sessionStorage	localStorage
ライフサイクル	有効期限（Expires）または最大保存時間（Max-Age）を設定しない限り、デフォルトでページを閉じると削除	ページを閉じると削除	明示的に削除するまで永久保存
HTTP Request	はい、Cookie header を通じてサーバーに送信可能	いいえ	いいえ
総容量	4KB	5MB	5MB
アクセス範囲	ウィンドウ/タブをまたぐ	同一タブのみ	ウィンドウ/タブをまたぐ
セキュリティ	JavaScript は HttpOnly cookies にアクセスできない	なし	なし

用語解説

Persistent cookies とは何か？

永続的 cookie は、データをユーザーのブラウザに長期間保存する方法です。具体的には、上記で述べた有効期限を設定することで実現します（Expires または Max-Age）。

個人的な実装経験

cookie

1. セキュリティ検証

一部のレガシープロジェクトはセキュリティ状況が良くなく、アカウント乗っ取りの問題が頻発し、運用コストが大幅に上昇していました。まず Fingerprint ライブラリ（コミュニティ版の精度は約 60%、有料版の月間無料枠は 2 万回）を採用し、ログインするユーザーをデバイスと位置情報のパラメータで一意の visitID として識別しました。次に、cookie の HTTP リクエストのたびに送信される特性を利用して、バックエンドがユーザーの現在の状況（デバイスの変更や所在地の異常な変化）をチェックし、異常が検出された場合にログインフローで OTP 検証（会社の要件に応じてメールまたは SMS）を強制的にトリガーしました。

2. プロモーションコード URL

製品サイトの運営時、アフィリエイトマーケティング戦略として協力パートナーに専用 URL を提供し、集客とプロモーションを容易にしていました。これらの集客経由で入ってきた顧客がそのプロモーターの実績に属することを確保するため、cookie の expires 特性を使って実装しました。ユーザーがサイトに流入してから 24 時間以内（制限時間は運営側が決定可能）はプロモーションコードが有効となり、ユーザーが意図的に URL のプロモーションコードパラメータを削除しても、登録時に cookie から対応パラメータを取得して適用し、24 時間後に自動的に失効します。

localStorage

1. ユーザー設定の保存

• ユーザーの個人設定の保存に頻繁に使用されます。例：ダークモード、i18n の言語設定など。
• またはログインの token の保存。