← カテゴリ一覧に戻る

localStorage（ブラウザ保存）

localStorage.setItem getItem removeItem

ブラウザを閉じても消えない永続的なストレージです。約5〜10MBまで保存でき、文字列のみ対応します。

デモ：テキストを localStorage に保存

ページを再読み込みしても内容が残ります

テーマ設定（localStorage に保存）：

コード例

js
// 保存（文字列のみ）
localStorage.setItem('key', 'value');

// オブジェクト・配列はJSONに変換
localStorage.setItem('user', JSON.stringify({ name: 'Alice', age: 30 }));

// 取得
const value = localStorage.getItem('key');       // "value" or null
const user = JSON.parse(localStorage.getItem('user') ?? 'null');

// 削除
localStorage.removeItem('key');
localStorage.clear(); // 全キーを削除

// 全キーの列挙
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, localStorage.getItem(key));
}

// 容量チェック（ブラウザによって異なる）
// 超過すると QuotaExceededError がスロー
try {
  localStorage.setItem('key', largeData);
} catch (e) {
  if (e instanceof DOMException && e.name === 'QuotaExceededError') {
    console.error('容量超過');
  }
}

// storage イベント（他のタブでの変更を検知）
window.addEventListener('storage', (e) => {
  console.log('変更されたキー:', e.key);
  console.log('新しい値:', e.newValue);
  console.log('古い値:', e.oldValue);
});

比較：ブラウザストレージ三種

観点localStoragesessionStorageCookie
有効期間永続（手動削除まで）タブ閉じるまで指定した期限まで
容量~5-10MB~5MB~4KB
サーバー送信❌ しない❌ しない✅ 自動送信
用途設定、ドラフト保存一時的なフォームデータセッション、認証トークン

🤖 AIプロンプトテンプレート

以下のようなlocalStorageを使ったデータ永続化のサンプルコードを生成してください：
- localStorage.setItem / getItem / removeItem / clearの基本操作
- JSON.stringify/parseを使ったオブジェクト・配列の保存と取得
- ユーザー設定（テーマ・言語など）の永続化パターン
- QuotaExceededErrorのtry-catchによる容量超過ハンドリング
- storageイベントを使った複数タブ間のデータ同期

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo