ブラウザにデータを保存しよう

localStorageを使うと、ページを閉じた後も同じブラウザへ文字列データを保存できます。

今回は、名前と表示テーマを保存し、再読み込み後に復元する設定画面を作ります。保存、取得、更新、削除という一連の操作を確認します。

今回使用するファイル構成

javascript-practice/
├── index.html
└── js/
    └── script.js

localStorageへ値を保存する

文字列を保存・取得する

localStorage.setItem('theme', 'dark');

const theme = localStorage.getItem('theme');
console.log(theme);

削除にはremoveItem()を使います。

localStorage.removeItem('theme');

配列やオブジェクトをJSONへ変換する

localStorageが保存できるのは文字列です。配列やオブジェクトはJSONへ変換します。

const settings = {
  theme: 'dark',
  fontSize: 18,
};

localStorage.setItem('settings', JSON.stringify(settings));

取得時は元のデータへ戻します。

const saved = localStorage.getItem('settings');
const settings = saved ? JSON.parse(saved) : { theme: 'light', fontSize: 16 };

localStorageを安全に利用する

保存に向かないデータ

パスワード、認証トークン、個人情報などの機密情報は保存しません。同じオリジン上のJavaScriptから読み取れるためです。容量にも限りがあり、サーバーや別端末とは自動同期されません。

設定を保存・復元する画面を作る

HTMLを用意する

<h1>表示設定</h1>

<form id="settings-form">
  <p>
    <label for="display-name">表示名</label>
    <input id="display-name" type="text">
  </p>
  <p>
    <label for="theme">テーマ</label>
    <select id="theme">
      <option value="light">ライト</option>
      <option value="dark">ダーク</option>
    </select>
  </p>
  <button type="submit">設定を保存</button>
  <button id="clear-button" type="button">設定を削除</button>
</form>

<p id="settings-message" aria-live="polite"></p>

保存用のキーを決める

const STORAGE_KEY = 'buildbooks.settings';

キーは別の機能と衝突しない名前にします。定数にすると保存時と取得時のスペル違いを防げます。

保存と復元を関数へ分ける

function saveSettings(settings) {
  const json = JSON.stringify(settings);
  localStorage.setItem(STORAGE_KEY, json);
}

function loadSettings() {
  const json = localStorage.getItem(STORAGE_KEY);

  if (json === null) {
    return null;
  }

  try {
    return JSON.parse(json);
  } catch (error) {
    console.error('設定を読み込めませんでした', error);
    localStorage.removeItem(STORAGE_KEY);
    return null;
  }
}

保存済みの値がない場合、getItem()はnullを返します。JSONが壊れている可能性も考え、JSON.parse()をtryとcatchで囲んでいます。

フォームと保存処理を接続する

const form = document.querySelector('#settings-form');
const displayNameInput = document.querySelector('#display-name');
const themeSelect = document.querySelector('#theme');
const clearButton = document.querySelector('#clear-button');
const message = document.querySelector('#settings-message');

const savedSettings = loadSettings();

if (savedSettings) {
  displayNameInput.value = savedSettings.displayName ?? '';
  themeSelect.value = savedSettings.theme ?? 'light';
}

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const settings = {
    displayName: displayNameInput.value.trim(),
    theme: themeSelect.value,
  };

  saveSettings(settings);
  message.textContent = '設定を保存しました。';
});

clearButton.addEventListener('click', () => {
  localStorage.removeItem(STORAGE_KEY);
  form.reset();
  message.textContent = '保存した設定を削除しました。';
});

保存後にページを再読み込みし、値が復元されることを確認します。DevToolsのApplicationタブにあるLocal Storageから、保存されたJSON文字列も確認できます。

localStorageの特性を理解する

• 同じオリジン内で共有される
• 有効期限は自動設定されない
• 文字列だけを保存する
• 同期処理のため大量データには向かない
• シークレットモードやブラウザ設定によって利用できない場合がある

オリジンとは、URLのスキーム、ホスト、ポートの組み合わせです。http://localhost:5500とhttp://localhost:8000はポートが異なるため別の保存領域です。

まとめ

文字列はそのまま、配列やオブジェクトはJSONへ変換して保存します。次の記事からはいったん「Webの基礎」カテゴリへ移り、ここまで学んだHTML、CSS、JavaScriptがブラウザ上でどのように動くのかを整理します。