質問: ``` ``` 上記の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値も保存することができるでしょうか。 ご教授お願いいたします。 ``` //スクリプト //HTML ```
回答: そもそもですが、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()のような形で取得するのもありと思います。