フォームで送信したhiddenの値をlocalStorageに保存するには

Question

<form method="post" action="https://example.com/hoge.cgi">
<input type="hidden" name="foo" value="abc" />
<input type="hidden" name="bar" value="123" />
<input type="hidden" name="page" value="baz" />
<input type="submit" value="" />
</form>

上記のformを送信するとhttps://example.com/hoge.cgiに飛びformの内容が送信されます。
このフォームをスマートフォンのchromeで送信するとフォーム内容が送信されhttps://example.com/hoge.cgiが開きますが
このページ（https://example.com/hoge.cgi）を開いたままブラウザを一度終了させ、
再びブラウザを起動させるとフォームの内容が反映されない状態のhttps://example.com/hoge.cgiが表示されてしまいます。
（safariの場合にはフォーム内容を再送信するかどうか聞いてきます）

getで送信するとURLにパラメータが付くので（https://example.com/hoge.cgi?foo=bar&bar=123&page=baz）、
ブラウザを開きなおしてもフォームの内容が反映されたページが開きますが
post送信でブラウザを開きなおし再びリロードされてもフォームの内容が反映された状態で開くことができません。

そこでフォームを送信する時に内容（value値）をローカルストレージに保存し、
それをonloadすることで再度ブラウザを起動しても送信後のページが表示できるようにできないかと考えています。

以下のスクリプトを参考にローカルストレージへの保存を実装しようとしていたのですが hidden のvalue値が保存されません。
input[type=hidden]の処理が必要だと思うのですが、どうしてもできずにいます。
どのようにすればhiddenのvalue値も保存することができるでしょうか。
ご教授お願いいたします。

//スクリプト
<script>
$(function(){
	// ローカルストレージ非対応環境
	if (!window.localStorage) return;

	var $text = $('input[type=text], textarea');
	var $hidden = $('input[type=hidden]');

	//ローカルストレージの読み込み
	function init(){
		//text, textarea
		$.each($text, function(){
			var inputName = $(this).attr('name');
			if(localStorage[inputName]){
				$(this).val(localStorage[inputName]);
			}
		});
		//hidden
		$.each($hidden, function(){
			var inputName = $(this).attr('name');
			if(localStorage[inputName]){
				$(this).val(localStorage[inputName]);
			}
		});

		bindEvent();
	}//init

	init();

	//ローカルストレージへの保存・削除
	function bindEvent(){
		$('input[type=text], input[type=hidden], textarea').change(function(){
			localStorage.setItem($(this).attr('name'), $(this).val());
		});
	}
});
</script>

//HTML
<form method="post" action="https://example.com/hoge.cgi">
<input type="hidden" name="foo" id="foo" value="abc" />
<input type="hidden" name="bar" id="bar" value="123" />
<input type="hidden" name="page" id="page" value="baz" />
<input type="submit" value="送信" />
</form>

Comments

[m.ts10806]

そもそもhiddenに対する取得・保存処理が書かれていないようです。まずは書いてみてください。基本はtextと同様です。

[cp_cop]

先日はご回答いただきありがとうございました。hiddenに対する取得・保存処理がわからずにtextと同様の記述を試してみたのですがダメでした。試した記述を質問文に書き加えました。宜しくお願いします。

Answer 1

そもそもですが、change()イベントのため、text自体もボタン押下時ではなくchange()したとき、
つまり、内容変更してフォーカスが外れたときにlocalstorage()が書き換わるようになっています。
hiddenはchange()イベントが動作することはありません。
submit時のイベントを取得し、form内の情報を取得するようにしてはいかがでしょうか？

    $('form').submit(function() {
        var param = $(this).serializeArray();
        $.each(param, function(index,elem){
            localStorage.setItem(elem.name,elem.value);
        });
    });

serializeを利用すれば、フォームの情報を容易に取得することができます。

• jQueryでフォームの値をすべて取得する方法

取得したい情報が決まっているのであればIDも振られているようなので、
1つずつIDを指定し、$("#number").val()のような形で取得するのもありと思います。

Comments

[cp_cop]

ご回答ありがとうございます。
テストした結果、見事に全てのvalue値がローカルストレージに保存することができました。
こういった方法があるとは、自分の浅はかな知識が悲しくなります。
serializeというものを恥ずかしながら知りませんでしたので本当に助かりました。ありがとうございます。

あとはローカルストレージに保存された値を使って、form送信後のページがブラウザが再び開かれても表示できるように教えていただいた内容の
＞1つずつIDを指定し、$("#number").val()のような形で取得
を試してみたいと思います。

ただ、javascriptの知識が乏しいため実際にどのような形で取得すればよいのかよろしければ教えていただけないでしょうか？
参考にさせていただければ助かります。

[m.ts10806]

えーと、書き方悪かったです。ごめんなさい。

＞1つずつIDを指定し、$("#number").val()のような形で取得
は、あくまでformの入力値を取得するときの話で、ローカルストレージから値を保存するわけではないです。

//ローカルストレージへ保存 ※チェックボックスなどはこれではチェックしたボックスは取得できない
localStorage.setItem("foo",$("#foo").val());
localStorage.setItem("bar",$("#bar").val());

//ローカルストレージから取得
var foo = localStorage["foo"];
var bar = localStorage["bar"];

//任意のinputへセット ※チェックボックスなどはこれではチェックできない
$("#foo").val(localStorage["foo"]);
$("#bar").val(localStorage["bar"]);

[cp_cop]

再度のご回答ありがとうございます。

＞1つずつIDを指定し、$("#number").val()のような形で取得
は入力値で取得したい情報が決まっている場合のことなのですね。
私の勘違いでした。こちらこそすいません。

ご丁寧に保存、取得、inputへのセットまで教えていただきありがとうございました。
大変参考になることばかりでとても勉強になりました。
ご回答感謝致します。

Answer 2

hiddenにchangeイベントは起こらないのでは？

$('input[type=text], input[type=hidden], textarea').change(function(){
    localStorage.setItem($(this).attr('name'), $(this).val());
}).change();//こうしたらとりあえずイベントを起こせるかも

Comments

[cp_cop]

ご回答ありがとうございます。
＞hiddenにchangeイベントは起こらないのでは？
恥ずかしながら無知で知りませんでした。

ただ、教えていただいた内容を実行したらlocalstrageにhiddenの値も保存されました。
そもそもの自分の記述が正しいやり方なのか疑問ですが、とりあえず保存はできました。
ありがとうございました。