6.2 localStorage・sessionStorage

Web Storageの概要

localStorageとsessionStorageの違い

ストレージの確認

確認方法

表示される情報

フィルタリング

上部の検索ボックスでキーや値を絞り込める。多数のエントリがある場合に便利。

データの編集

値の編集

キーの編集

キー名のセルをダブルクリックして編集可能。ただし、キーを変更すると実質的に新しいエントリが作成され、古いエントリは削除される動作になる。

新しいエントリの追加

エントリの削除

• 単一削除: エントリを選択 → Delete キー、または右クリック → Delete
• 全削除: 右上の「Clear All」ボタン（🚫アイコン）

Consoleでの操作

Consoleを使用すると、プログラムからストレージを操作できる。

基本操作

// 値の取得
localStorage.getItem('key');
sessionStorage.getItem('key');

// 値の設定
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');

// 値の削除
localStorage.removeItem('key');
sessionStorage.removeItem('key');

// 全削除
localStorage.clear();
sessionStorage.clear();

// キーの数を取得
localStorage.length;

// インデックスでキーを取得
localStorage.key(0);

全データの表示

// localStorageの全データをオブジェクトとして取得
Object.entries(localStorage).forEach(([key, value]) => {
  console.log(key, value);
});

// または、スプレッド構文で
console.table({...localStorage});

JSONデータの操作

// オブジェクトを保存（JSON文字列に変換）
const user = { name: 'Alice', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// オブジェクトを取得（JSONをパース）
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // 'Alice'

JSONデータの確認

JSONとして保存された値は、展開して内容を確認できる。

確認方法

1. JSON形式の値をクリック
2. 値がフォーマットされて表示される
3. ツリー構造で展開/折りたたみ可能

Consoleでの整形表示

// JSON値を整形して表示
const data = localStorage.getItem('settings');
console.log(JSON.parse(data));

// テーブル形式で表示
console.table(JSON.parse(localStorage.getItem('items')));

デバッグのテクニック

ストレージ変更の監視

storageイベントを使用して、他のタブ/ウィンドウでのlocalStorage変更を監視できる。

// storageイベントのリスナー（同一オリジンの別タブの変更を検知）
window.addEventListener('storage', (event) => {
  console.log('Storage changed:', {
    key: event.key,
    oldValue: event.oldValue,
    newValue: event.newValue,
    url: event.url
  });
});

ブレークポイントでの確認

Sourcesパネルでストレージ操作の前後にブレークポイントを設定し、データの変化を追跡。

スニペットでのバックアップ

// localStorageの全データをコンソールに出力（コピー用）
console.log(JSON.stringify(localStorage, null, 2));

// バックアップからの復元
const backup = {"key1":"value1","key2":"value2"};
Object.entries(backup).forEach(([k, v]) => localStorage.setItem(k, v));

よくあるパターン

ユーザー設定の保存

// テーマ設定の保存と読み込み
// 保存
localStorage.setItem('theme', 'dark');

// 読み込み（デフォルト値付き）
const theme = localStorage.getItem('theme') || 'light';

認証トークンの管理

// トークンの保存
localStorage.setItem('authToken', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...');

// トークンの確認
const token = localStorage.getItem('authToken');
if (!token) {
  console.log('ログインが必要です');
}

// ログアウト時の削除
localStorage.removeItem('authToken');

フォームデータの一時保存

// 入力中のフォームデータをsessionStorageに保存
document.querySelector('form').addEventListener('input', (e) => {
  const formData = new FormData(e.target.form);
  const data = Object.fromEntries(formData);
  sessionStorage.setItem('formDraft', JSON.stringify(data));
});

// ページ読み込み時に復元
const draft = sessionStorage.getItem('formDraft');
if (draft) {
  const data = JSON.parse(draft);
  // フォームに値を設定...
}

トラブルシューティング

データが保存されない

容量の確認

// 使用量の概算（バイト）
function getStorageSize(storage) {
  let total = 0;
  for (let key in storage) {
    if (storage.hasOwnProperty(key)) {
      total += key.length + storage[key].length;
    }
  }
  return total * 2; // UTF-16は1文字2バイト
}

console.log('localStorage使用量:', getStorageSize(localStorage), 'bytes');

QuotaExceededErrorの対処

// try-catchでエラーをハンドリング
try {
  localStorage.setItem('largeData', hugeString);
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    console.error('ストレージ容量が不足しています');
    // 古いデータを削除するなどの対処
  }
}

データが消える

• sessionStorage: タブを閉じると削除される仕様
• ブラウザのクリア: 履歴削除時にストレージも削除される場合がある
• ストレージ圧迫: ブラウザが自動的に古いデータを削除することがある

セキュリティ上の注意

機密情報の保存

• パスワードを平文で保存しない
• クレジットカード情報を保存しない
• 認証トークンはHttpOnly Cookieの方が安全

XSS攻撃のリスク

localStorageはJavaScriptからアクセス可能。XSS攻撃でスクリプトが注入されると、ストレージ内のデータが盗まれる可能性がある。

推奨事項

• 重要な認証情報はHttpOnly Cookieを使用
• 保存するデータは最小限に
• 有効期限のあるトークンを使用
• 適切なCSP（Content Security Policy）を設定