localStorage の使い方と、2026年に気をつけること

公開 2026-10-25 ／ 更新 2026-10-25 ／ 文：ランツ

ブラウザにデータを保存する一番手軽な方法です。書き方は15年前から変わっていません。

変わったのは「何を入れていいか」のほうです。 解説記事の多くが「localStorageのデータには期限がない」と書いていますが、 Safariでは7日で消えます。これはAppleが公式に announced している仕様です。

この記事は基本の書き方と、知らないと事故る前提をまとめます。

先に結論

基本の4つ

setItem / getItem / removeItem / clear

これだけ覚えれば使えます。

基本操作

// 保存
localStorage.setItem('name', 'ランツ');

// 取得（キーが無ければ null）
const name = localStorage.getItem('name');

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

// 全部消す（同じオリジンの分だけ）
localStorage.clear();

// 件数と、n番目のキー
localStorage.length;
localStorage.key(0);

オブジェクトは入らない

MDNにはこう書かれています。

つまりオブジェクトや配列をそのまま渡すと、文字列に変換されて壊れます。

JSONを経由してください。

オブジェクトを保存する

const memo = { title: 'buy milk', done: false };

// 保存：文字列にしてから
localStorage.setItem('memo', JSON.stringify(memo));

// 取得：戻すときにパース
const raw = localStorage.getItem('memo');
const restored = raw ? JSON.parse(raw) : null;

「期限がない」は、もう正しくない

MDNの説明はこうです。

仕様としてはそのとおりです。でも実際のブラウザは消しにきます。

Safariは7日で消す

WebKitの公式ブログ（2020年3月24日・Safari 13.1 / iOS・iPadOS 13.4）に、こう書かれています。

対象として挙げられているのは次の5つです。

条件は「7日間Safariを使っていて、そのサイトでの操作が無い」こと。 毎日そのサイトを触っているユーザーのデータは消えません。 消えるのは「しばらく来ていないユーザー」のデータです。

IndexedDBに逃げても同じ

ブラウザに持たせたデータを確実に残したいなら、サーバーに持つしかありません。 どうしてもクライアントに置くなら、消えても困らない設計にしてください。

何を入れてよくて、何を入れてはいけないか

落ちるケース

localStorageは「必ず使える」ものではありません。 例外が出る条件がMDNに書かれています。

SecurityError が出る条件

実際に遭遇するのは後者です。 ブラウザの設定でサイトデータをブロックしている人、プライベートモード、 拡張機能でストレージを止めている人。一定数います。

容量を超えたとき

上限に達すると書き込み時に例外（QuotaExceededError）になります。 戻り値が false になるわけではありません。 気づかずに setItem() を呼び続けると、そこから下の処理が全部止まります。

必ず try/catch で包む

安全に読み書きする

const store = {
  get(key, fallback = null) {
    try {
      const raw = localStorage.getItem(key);
      return raw === null ? fallback : JSON.parse(raw);
    } catch {
      // ストレージ不可、または壊れたJSON
      return fallback;
    }
  },
  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
      return true;
    } catch {
      // 容量超過・プライベートモード・ポリシーで拒否
      return false;
    }
  },
  remove(key) {
    try { localStorage.removeItem(key); } catch {}
  },
};

// 使う側は失敗を前提に書く
if (!store.set('draft', text)) {
  // 保存できなかったことをユーザーに伝えるか、黙って諦める
}

sessionStorage / Cookie / IndexedDB の使い分け

似たものが4つあるので、選ぶ基準を表にします。

他のタブと同期できる

あまり知られていませんが、localStorageの変更は他のタブに通知できます。 storage イベントです。

他タブでの変更を受け取る

window.addEventListener('storage', (e) => {
  // e.key        変更されたキー
  // e.oldValue   変更前の値
  // e.newValue   変更後の値（削除なら null）
  // e.storageArea 対象のStorageオブジェクト
  // e.url        変更を行ったページのURL
  if (e.key === 'memo:v1') {
    el.value = e.newValue ?? '';
  }
});

使いどころは「複数タブで同じ画面を開いている場合」です。 片方でログアウトしたらもう片方も画面を更新する、片方で下書きを消したら反映する、といった処理が書けます。

簡易メモ帳を作る

ここまでの注意点を全部入れた実装です。消える前提・落ちる前提で書いています。

HTML

<textarea id="memo" placeholder="メモ"></textarea>
<p id="status"></p>
<button id="clear">消す</button>

JavaScript

const KEY = 'memo:v1';          // ① キーにバージョンを付ける
const el = document.getElementById('memo');
const status = document.getElementById('status');

// 復元（失敗しても空で続行）
el.value = store.get(KEY, '');

// ② 入力のたびに書かない（まとめて1回）
let timer;
el.addEventListener('input', () => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    const ok = store.set(KEY, el.value);
    // ③ 保存できたかをユーザーに見せる
    status.textContent = ok ? '保存しました' : '保存できませんでした';
  }, 500);
});

document.getElementById('clear').addEventListener('click', () => {
  store.remove(KEY);
  el.value = '';
  status.textContent = '';
});

AIでやるなら

localStorageのコードはAIがすぐ書けます。問題は書けすぎることです。 何も言わないとtry/catchも無い、オブジェクトを直接入れる、トークンを保存するコードが出てきます。 学習データに2011年以降の記事が大量にあるからです。

前提を渡して書かせる

プロンプト

localStorageを使う小さなモジュールを書いてください。

【必ず守ること】
- 保存できるのは文字列だけなので JSON.stringify / JSON.parse を通す
- setItem も getItem も JSON.parse も try/catch で包む
- 保存に失敗したら true/false で呼び出し側に返す
- getItem は、キーが無いときと失敗したときに既定値を返す
- キーには "名前:v1" のようにバージョンを付ける

【書かないでほしいこと】
- 認証トークンやセッションIDを保存する例
- 「localStorageのデータは永続的です」という説明

【最後に】
このコードが動かない環境・消えるケースを箇条書きで挙げてください。

出てきたコードの検証

実際に試すときは、この3つの環境で確認してください。

よくある質問

localStorageのデータはいつまで残りますか

仕様上は明示的に消すまでですが、Safariは7日で消します。WebKitの公式ブログに「after seven days of Safari use without user interaction on the site」と明記されています。消える前提で設計してください。

IndexedDBに移せば消えませんか

消えます。WebKitが挙げている7日削除の対象にIndexedDB も入っています（SessionStorage、Service Workerのキャッシュも）。容量の問題は解決しますが、寿命の問題は解決しません。

オブジェクトが [object Object] になります

文字列しか保存できないためです。MDNに「キーと値は常に UTF-16 文字列形式」とあります。JSON.stringify() を通してから保存し、取り出すときに JSON.parse() してください。

ログイン状態の保存に使えますか

やめてください。localStorage は同一オリジンのJavaScriptから無条件に読めるので、XSSが1か所でもあれば抜かれます。Cookie の HttpOnly ならJavaScriptから読めません。こちらを使ってください。

プライベートモードで動きません

MDNによると、ユーザーがそのオリジンでのデータ永続化を拒否している場合に SecurityError が発生します。プライベートモードや、サイトデータをブロックしている設定が該当します。try/catch で包んで、使えない前提で動くようにしてください。

容量はどれくらいですか

おおむね5MB前後です（ブラウザによります）。超えると書き込み時に例外が出ます。戻り値では分からないので、try/catch が要ります。

sessionStorage との違いは

MDNの表現では、localStorageのデータには期限がないのに対し、sessionStorageはページセッションが終了したとき（ページが閉じられたとき）にクリアされます。APIは同じです。

まとめ

書き方は15年前から変わっていません。押さえるのは3つです。

1. 文字列しか入らない。
   JSON.stringify / JSON.parse を通す。パースも try/catch で囲む。
2. 「期限がない」は実態と違う。
   Safariは7日で消します。IndexedDBに移しても同じです。消えて困るものはサーバーへ。
3. 落ちる前提で書く。
   プライベートモードと容量超過で例外が出ます。トークンは絶対に入れない。

解説記事をコピーする前に、それがいつ書かれたものかを見てください。 APIが変わっていなくても、前提のほうが変わっていることがあります。