JSでフォームの入力内容をJSONデータで取得してローカルストレージに一時保存し、後で再セットする方法【jQuery】

今回は、JavaScriptでフォームに入力された内容を一括で取得し、ローカルストレージにデータを保存・取り出す方法をメモ。（jQueryを使います）

例えば、「ユーザーの基本情報入力フォーム」と「商品購入フォーム」のような２つの入力フォームが絡んでくるという場合に、
最終確認画面で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化しています。

たった３行でフォームのデータを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');

実際は、チェックボックスやラジオボックスなどの種類によって、処理を分岐させることになるかなと思います。