localStorage

localStorage とは

localStorage は、ブラウザにキーバリュー形式でデータを永続的に保存する Web Storage API である。セッションをまたいでデータが保持され、明示的に削除するまで消えない。容量は 5〜10 MB。

sessionStorage との比較

観点	localStorage	sessionStorage	Cookie
有効期間	永続 (手動削除まで)	タブを閉じるまで	有効期限まで
容量	5〜10 MB	5〜10 MB	4 KB
サーバー送信	なし	なし	毎リクエスト送信
API	同期	同期	document.cookie

基本操作

// 保存
localStorage.setItem('theme', 'dark');

// 取得
const theme = localStorage.getItem('theme'); // 'dark'

// 削除
localStorage.removeItem('theme');

// 全削除
localStorage.clear();

// オブジェクトの保存 (文字列のみなので JSON 変換が必要)
localStorage.setItem('user', JSON.stringify({ name: 'Alice', age: 30 }));
const user = JSON.parse(localStorage.getItem('user')!);

型安全なラッパー

function getStorageItem<T>(key: string, fallback: T): T {
  const item = localStorage.getItem(key);
  if (item === null) return fallback;
  try { return JSON.parse(item) as T; }
  catch { return fallback; }
}

function setStorageItem<T>(key: string, value: T): void {
  localStorage.setItem(key, JSON.stringify(value));
}

// 使用
const theme = getStorageItem('theme', 'light');
setStorageItem('theme', 'dark');

適するケース / 適さないケース

✅ 適する	❌ 適さない
テーマ設定 (ダーク/ライト)	認証トークン (XSS で盗まれる)
言語設定	パスワード、個人情報
フォームの下書き	大量データ (→ IndexedDB)
UI の状態 (サイドバーの開閉)	サーバーと同期が必要なデータ

セキュリティ上の注意

localStorage は JavaScript から自由にアクセスできるため、XSS 攻撃で全データが盗まれる。

// ❌ 認証トークンを localStorage に保存しない
localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiJ9...');

// ✅ 認証トークンは HttpOnly Cookie で管理
// (JavaScript からアクセスできない)

ストレージイベント

// 別タブでの変更を検知
window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    applyTheme(event.newValue!); // 別タブでテーマが変わったら同期
  }
});

storage イベントは変更を行ったタブ以外のタブで発火する。タブ間のデータ同期に使える。

理論と実装の両面から学ぶなら関連書籍が参考になる。