localStorage フォーム自動保存
このスニペットは、入力途中のフォーム内容をブラウザの localStorage に自動で保存し、再訪時に復元する仕組みです。各入力欄の input イベントで FormData を読み取り、 JSON.stringify でまとめて一つのキーに保存します。
解説
このスニペットは、入力途中のフォーム内容をブラウザの localStorage に自動で保存し、再訪時に復元する仕組みです。各入力欄の input イベントで FormData を読み取り、JSON.stringify でまとめて一つのキーに保存します。ページを開いた時点で restore() が走り、保存済みの下書きがあれば各欄へ書き戻します。送信が完了したら localStorage.removeItem で下書きを消すため、不要なデータが残りません。保存・復元のたびに案内文が表示され、利用者は今の状態を把握できます。
こんな場面に
- 項目数が多い問い合わせや申込フォームの離脱対策
- 誤ってタブを閉じても書き直しが要らない長文入力欄
- 下書き保存をうたうコメント欄やアンケート
保存先のキー名は KEY 定数で管理しており、フォームごとに別名にすれば干渉しません。注意点として、localStorage は同じブラウザ内にしか残らず、別の端末やシークレットウィンドウには引き継がれません。またパスワードやクレジットカード番号など機微な情報は保存しないでください。保存タイミングを抑えたい場合は、入力のたびではなく一定時間ごとにまとめる debounce を足すと書き込み回数を減らせます。
よくある質問
保存したデータはどこに残りますか
利用者のブラウザ内の localStorage に保存されます。サーバーには送られず、同じ端末の同じブラウザでのみ復元されます。別の端末やシークレットモードには引き継がれません。
機微な情報も自動保存して大丈夫ですか
パスワードやカード番号などの機微な情報は localStorage に残すべきではありません。これらの欄は保存対象から外すか、自動保存自体を無効にすることをおすすめします。