ブラウザでフォームの状態を永続化する方法

10分かけて複数ステップにわたる求人応募フォームを入力したとします。誤って戻るボタンを押してしまい、すべてが消えてしまった。

これはWeb開発における最もフラストレーションの溜まるUXの失敗の一つですが、完全に防ぐことが可能です。本記事では、状況に応じた適切なストレージメカニズムを用いて、ブラウザ上でフォームの状態を永続化する方法を解説します。

なぜ最新アプリではフォームデータが消えるのか

従来のサーバーレンダリングされたページでは、若干の救いがあります。ブラウザはページ自体をキャッシュしているため、戻るナビゲーション時にフォームの値を復元することがしばしばあります。しかし、シングルページアプリケーションでは必ずしもその恩恵を受けられません。JavaScript がフォームを一から再レンダリングする場合、ブラウザに復元すべきキャッシュ済み DOM が存在しない可能性があり、フィールドが空のまま戻ってしまうのです。

解決策は、自分でフォームの状態をブラウザストレージに保存し、フォームのマウント時に復元することです。

適切なストレージメカニズムの選択

すべての永続化問題に同じ解決策が当てはまるわけではありません。以下は実用的な比較です:

localStorage は、ブログ記事のエディターや長い登録フォームなど、ブラウザ再起動後も残しておきたいドラフトに適しています。sessionStorage は、同一タブ内でのリフレッシュにのみ耐えられればよく、タブをまたぐ必要がない場合に向いています。IndexedDB によるフォームドラフトの保存は、リッチコンテンツ、ファイルメタデータ、または JSON 文字列では扱いにくい複雑なネスト構造のオブジェクトを保存する場合に意味があります。

localStorage と sessionStorage はどちらも同期的で文字列ベースであるため、すべての読み書きがメインスレッドをブロックし、JSON.stringify/JSON.parse を必要とします。IndexedDB は非同期で、構造化データをネイティブに扱えるため、単純なキー・バリューペアを超えるものには適しています。これら3つはすべて最新のブラウザで十分にサポートされています。

localStorage を用いたオートセーブの実装

基本パターンはシンプルです: 入力時に保存、ロード時に復元、送信成功時にクリアです。

const DRAFT_KEY = 'contact_form_draft';
const form = document.querySelector('#contact-form');

// Autosave with debounce
let saveTimer;
form.addEventListener('input', (e) => {
  clearTimeout(saveTimer);
  saveTimer = setTimeout(() => {
    const formData = Object.fromEntries(new FormData(e.currentTarget));
    try {
      localStorage.setItem(DRAFT_KEY, JSON.stringify(formData));
    } catch (err) {
      if (err.name === 'QuotaExceededError') {
        console.warn('Storage full, draft not saved');
      }
    }
  }, 500);
});

// Restore on load
window.addEventListener('DOMContentLoaded', () => {
  const saved = localStorage.getItem(DRAFT_KEY);
  if (!saved) return;
  try {
    const draft = JSON.parse(saved);
    Object.entries(draft).forEach(([name, value]) => {
      const field = form.querySelector(`[name="${name}"]`);
      if (field) field.value = value;
    });
  } catch {
    localStorage.removeItem(DRAFT_KEY);
  }
});

// Clear after successful submit
form.addEventListener('submit', () => {
  localStorage.removeItem(DRAFT_KEY);
});

保存呼び出しをデバウンスする(ここでは500ms)ことで、キーストロークごとにストレージに過剰なアクセスをすることを防ぎます。setItem は必ず try/catch で囲んでください — ブラウザは特にストレージの空き容量が少ない環境やサードパーティのストレージがパーティション化されている場合に QuotaExceededError をスローする可能性があり、実際にスローします。同様に、破損したドラフトが例外をスローして復元処理を破綻させないよう、JSON.parse も try/catch で囲むのが賢明です。

保存してはいけないもの

パスワード、決済カード番号、認証トークン、その他あらゆる機密性の高い個人情報を localStorage や sessionStorage に永続化してはいけません。これらの API はページ上で実行される任意の JavaScript からアクセス可能であり、XSS 攻撃に対して脆弱です。フォームが機密フィールドを収集する場合は、それらをドラフトロジックから完全に除外してください。

また知っておくべきこととして、組み込みやサードパーティのコンテキストでは、ブラウザが Web Storage へのアクセスをパーティション化または制限することが増えています。ストレージが常に利用可能であると想定せず、利用可能か確認し、適切にフォールバックするようにしてください。

ドラフトのクリアとエッジケース

フォームの送信が成功した後は、必ずドラフトを削除してください。予期せず再表示される古いドラフトはユーザーを混乱させます。フォーム構造が時間とともに変わる可能性がある場合は、古いドラフトが復元時にサイレントなエラーを引き起こさないよう、ストレージキーのバージョン管理(例: contact_form_draft_v2)を検討してください。

まとめ

ブラウザでのフォーム永続化には、ライブラリもバックエンドも必要ありません。少量の慎重な JavaScript — デバウンスされた保存、安全な復元、送信時のクリーンアップ — があれば、データ損失を防ぎ、フォームを目に見えて信頼性の高いものにすることができます。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.