今回は、JavaScriptでフォームに入力された内容を一括で取得し、ローカルストレージにデータを保存・取り出す方法をメモ。(jQueryを使います)
例えば、「ユーザーの基本情報入力フォーム」と「商品購入フォーム」のような2つの入力フォームが絡んでくるという場合に、
最終確認画面で1つ目のフォームの内容を修正させようとすると、2つ目のフォームの入力内容を保存しておかなければなりませんよね。
そんな時に便利なのがローカルストレージです。
データを一時的に保存し、簡単に取り出すことができます。
JSであればフォームのデータを一括で取得することもできるので、上述のような「2つのフォームが絡んできてどちらかの入力内容を保存しておきたいケース」で活用できるんじゃないかなと。
JSでフォームの内容をJSONデータで一括取得する方法
まずはJavaScript(jQuery)でフォームに入力されたデータを取得しましょう。
この時、ローカルストレージにデータを保存するため、JSONデータとして取得しておきます。
JSでフォームの内容をJSONデータで一括取得するコード
var form = $('.my_form'); //値を保存しておきたいフォーム
var formData = form.serializeArray(); //serializeArray()でフォームの内容をオブジェクト化
var formJson = JSON.stringify(formData); //JSON.stringifyメソッドでそのデータをJSON化させる
serializeArray()
というjQueryのメソッドを使えばフォームの内容を簡単にオブジェクトとして取得できるので、そのデータをJSON.stringify()
でJSON化しています。
たった3行でフォームのデータをJSONで取得できるとは。jQueryはやはり便利ですね。
フォームのJSONデータをローカルストレージへ保存する
あとは、先ほど取得したJSONデータをローカルストレージに保存していくだけになります。
ローカルストレージにデータを保存する方法は非常に簡単で、localStorage.setItem
メソッドというものを使ってローカルストレージに値を保存できます。
先ほどのコードに続けて、以下を追記
localStorage.setItem('form_data', formJson);
フォームデータが入ったformJson
を、'form_data'
というキーでローカルストレージに保存しています。
JSONデータをローカルストレージから取り出す
データの取得・保存ができたら、次はそのデータを取り出してみましょう。
ローカルストレージから値を取り出す方法も非常に簡単です。localStorage.getItem
というメソッドを使います。
ローカルストレージの値を取り出すコード
var localData = localStorage.getItem('form_data');
さきほど'form_data'
というキーでデータを保存したので、同じキー名を指定すればデータを取り出すことができます。
取り出したJSONデータから再度フォームに値をセットする
では、この取り出したデータをもう一度フォームにセットしてみましょう。
まずは、JSで扱いやすいようにJSONデータを改めてオブジェクトデータに戻してあげます。
ローカルデータから取得したJSONデータをオブジェクトへ戻す
localData = JSON.parse(localData);
これで、localData
はオブジェクトに変換されました。
この時のデータは以下のようになっています。
データの様子
[0] => {'name':'user_name', 'value':'やまだたろう'}
[1] => {'name': 'tel', 'value':'012-3456-7890'}
[2] => {'name': 'email', 'value':'mail@example.com}
では、このデータをフォームに再セットしていくコードを紹介しておきます。
簡単な例として、テキスト入力エリアだけのフォームを仮定しています。
データをフォームに再セット
var localData = localStorage.getItem('form_data');
localData = JSON.parse(localData);
//ローカルストレージにデータがなければ null が返ってくるので、nullで分岐
if (localData !== null) {
for (var index in localData) {
var data = localData[index];
var formName = data['name']; //name属性
var formVal = data['value']; //値
/* もう一度値をセットする処理など.... */
$('[name=' + formName + ']').val(formVal);
}
}
//一連の処理が終わったタイミングななどで、ローカルストレージの情報を削除しておきましょう
localStorage.removeItem('form_data');
実際は、チェックボックスやラジオボックスなどの種類によって、処理を分岐させることになるかなと思います。