ローカルストレージ

ろーかるすとれーじ / localStorage

作成日: 2024-01-07 | 最終更新: 2026-01-07

概要

ブラウザに小さなデータを保存しておける場所のこと。
JavaScriptからアクセスできて、ページを閉じても情報が残るのが特徴。 詳しくはMDN - localStorageも参照してください。

比べてみよう：JavaScript、JSON、ローカルストレージ

ローカルストレージを理解するために、まずJavaScriptとJSONとの違いを体験してみましょう。 同じデータを3つの方法で保存して、違いを実感できます。

3つの方法を比較してみよう
同じデータ「名前: 山田太郎」を、それぞれの方法で保存してみます。

方法データの保存場所ページを閉じたら特徴
JavaScript変数メモリ（一時的）消えるプログラム実行中だけ有効
JSONファイルサーバーやファイル残る（サーバーに保存）サーバーが必要、重い
ローカルストレージブラウザ内残る軽い、シンプル、ブラウザだけで完結

💡 ポイント：ローカルストレージは、JSONのように軽くてシンプルで、しかもブラウザだけで完結します。 サーバーを経由しないので、高速に動作するのが特徴です。

ポイント

  • ブラウザ内に保存される（サーバーには送られない）
  • localStorage.setItem() と getItem() で読み書きできる
  • 文字列しか保存できないため、オブジェクトを保存するにはJSON形式への変換が必須

日常生活でのローカルストレージの例

ローカルストレージは、私たちが毎日使っているWebサービスの裏側で活躍しています。 普段意識していないだけで、実はたくさんの場面で利用されているのです。

1. ショッピングサイトのカート機能

Amazonや楽天などで商品をカートに入れた後、ブラウザを閉じて翌日開いても商品が残っていることがあります。 これは、カートの中身をローカルストレージに保存しているためです。ログインしていない状態でも、 ブラウザ内にデータが残っているので買い物を続けられます。

2. ダークモードの設定

TwitterやYouTubeでダークモードに設定すると、次回アクセス時も同じ設定が適用されます。 この「ユーザーの好み」をローカルストレージに保存することで、毎回設定し直す手間が省けます。

3. フォームの下書き保存

Googleフォームや問い合わせフォームで入力中に誤ってブラウザを閉じてしまっても、再度開くと入力内容が残っていることがあります。 これはローカルストレージに自動で下書きを保存しているためで、データの消失を防ぐ重要な仕組みです。

フォームの下書き保存を体験しよう
入力中にブラウザを閉じても、再度開くと入力内容が残っています。

4. 言語設定の記憶

多言語対応のWebサイトで日本語を選択すると、次回アクセス時も日本語で表示されます。 選択した言語設定をローカルストレージに保存することで、ユーザーが毎回言語を選び直す必要がなくなります。

5. 訪問履歴やお気に入り機能

ニュースサイトやブログで「最近読んだ記事」「お気に入りの記事」が表示されるのも、 ローカルストレージに記事IDを保存している場合が多いです。サーバーを経由しないため、高速に動作します。

コードで実装してみよう：フォームの下書き保存

さっき説明した「フォームの下書き保存」の例を、そのままコードで実装してみましょう。 問い合わせフォームで入力中にブラウザを閉じても、再度開くと入力内容が残っている機能です。

このコードで実装していること:

  • フォームに入力した内容をローカルストレージに保存
  • ページを再読み込みしても、保存した内容を自動で復元
  • 送信ボタンを押したら、ローカルストレージから削除
フォームの下書き保存を実装 (JavaScript)
// HTMLのフォーム要素を取得
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const messageInput = document.getElementById('message');

// ページ読み込み時に、保存された下書きを復元
window.addEventListener('load', () => {
  const savedDraft = localStorage.getItem('contactDraft');
  if (savedDraft) {
    const draft = JSON.parse(savedDraft);
    nameInput.value = draft.name || '';
    emailInput.value = draft.email || '';
    messageInput.value = draft.message || '';
    console.log('下書きを復元しました');
  }
});

// 入力内容をリアルタイムで保存（入力するたびに保存）
nameInput.addEventListener('input', () => {
  const draft = {
    name: nameInput.value,
    email: emailInput.value,
    message: messageInput.value
  };
  localStorage.setItem('contactDraft', JSON.stringify(draft));
});

emailInput.addEventListener('input', () => {
  const draft = {
    name: nameInput.value,
    email: emailInput.value,
    message: messageInput.value
  };
  localStorage.setItem('contactDraft', JSON.stringify(draft));
});

messageInput.addEventListener('input', () => {
  const draft = {
    name: nameInput.value,
    email: emailInput.value,
    message: messageInput.value
  };
  localStorage.setItem('contactDraft', JSON.stringify(draft));
});

// フォーム送信時に下書きを削除
document.getElementById('contactForm').addEventListener('submit', () => {
  localStorage.removeItem('contactDraft');
  console.log('送信完了。下書きを削除しました');
});

💡 ポイント：このコードは、さっき説明した「フォームの下書き保存」の仕組みをそのまま実装しています。 入力内容をJSON形式でローカルストレージに保存し、 ページを再読み込みしたときに自動で復元します。

関連用語・比較

用語名特徴
localStorageページを閉じても残る、永続的
sessionStorage同じタブ内だけ。閉じると消える
クッキーサーバーにも送れる、小さい、やや古い

よくある質問（FAQ）

関連書籍