JavaScript でフォームの値を localStorage に記録、読み込み、削除する

弊社営業課長から

「予約フォームで名前、生年月日、電話番号、メールアドレスを入力した後に一度サイト抜けて、また予約フォーム入ったらまた名前、生年月日、電話番号、メールアドレスを入力し直しってユーザーしんどいよね。何とかならない？」

という要望があったので、予約フォームの入力値を javascript 側で localStorage に保存しておいて、再度予約フォームまで来た時に localStorage から読み出す方式を取る事にした。

github

使い方

js/copy-paste-form-value.min.js を読み込む

<script type="text/javascript" src="copy-paste-form-value.min.js"></script>

form の値を記録開始

function 実行後、form の change イベント発火時 localStorage に form の値が記録されます。

formChangeEvent();

form の値を読み込み

function 実行時、localStorage から記録していた form の値を呼び出してセットします。

loadForm();

記録していた form の値を削除

※localStorage の値が全て消えます

clearStorage();

基本的にはフォームの値を記録したいページで js を読み込んで

loadForm();
formChangeEvent();

を実行するだけ。

また、記録を削除したいページで js を読み込んで

clearStorage();

すればいいかなと思います。（予約完了画面とか）

注意事項

• 対象は input, select, textarea です。
• hidden パラメータはコピー・ペーストを行いません。
• 画面上にフォームが存在しない場合、動作しません。
• 画面上に複数のフォームが存在している場合、正常に動作しません。
• ajax を利用して動的に要素の表示・非表示を制御している場合、正常に動作しない場合があります。

chrome 拡張機能版

Alt + i で form の値を記録、 Alt + o で 記録した値を form にペーストします。
in, out で覚えていただければ…。

変更履歴

2023/02/15 - v1.1.0

• ペースト時、要素の click() と change() イベントを発火させるように修正
• ペースト時、20ms の待機時間を発生させるように修正

2022/12/02 - v1.0.1

• ちょっとした不具合対応
• テストコードの追加