jqueryで手入力されたinputテキストの値を取得したい

前提・実現したいこと

jqueryで動的にinputテキスト(name="text1")のデータをHTML()で取得したいと考えております。
localStorageを用いて、一時データとしてHTML文ごと保存して、再読込の際に再び取り出すという流れにしたいです。
しかし、ユーザーが入力したデータがhtml()では取得ができない為、val()で値を
取得するか考えましたが、
動的にappend()等で今後、inputテキストの数を増やしたい為、val()で取得する方法はあまり行いたくありません。
コードとして、表示されるテキストボックスに文字を入力して、画面遷移後も、テキストボックスの内容を保持したいです。

<script type="text/javascript">
$(function() {

$("#divTest").html(localStorage.getItem("divData"));
	
	//バツボタンor（戻るボタン）を押した時に一時データを保管する
	$(window).on("beforeunload",function(e){
		localStorage.setItem("divData",$("#divTest").html());
		alert($("#divTest").html());//表示用
	});


});
</script>
<div id="divTest">
	<input type="text" name="text1" id="tekiyo" value=""/>
</div>

行動規範の内容に同意します

回答2件

ベストアンサー

まず、いちばん最初にlocalStorage.getItem("divData")した結果を問答無用で#divTestにぶち込んでますが、それをやってしまうと~~divDataが取得できないときにundefinedという文字列がdivの中にぶち込まれてしまいます。
文字列で返ってきますので、'undefined'ではないことを確認したうえで設定した方がいいと思います。~~
申し訳ありません。打ち消し線部分は誤りです。
getItem('key')でkeyが存在しない場合、nullが返却されます。
MDN Storage.getItem()

次に本題の.html()で取得した結果をlocalStorageに保存したいという件ですが、残念ながらそのままではユーザ入力値まで保存することはできません。
.html()で取得できるのはHTMLに書き出されているものだけです。ユーザがテキストボックスに入力したものは、HTMLにリアルタイムで書き出されたりはしないので、.html()で取得してもユーザ入力値は取得されません。

なので、方法としては.val()で取得した値を保存し、それと同時にinputの個数や構成などもHTMLではなく自分で決めたフォーマットのデータとして保存。
画面表示時には、inputの個数や構成のデータをもとにまずinput要素を復元し、その後valueを埋め戻すような形で検討された方がいいと思います。

投稿2018/08/21 10:20

編集2018/08/23 00:54

spookybird

総合スコア1803

##脆弱性の問題
もし外部に公開するサイトを作成されているのでしたら、localStrage 内のデータなどをそのまま jQuery の html() メソッドに与えるのはやめたほうが良いと思います。

例えば、図書館の共有PCなどで、悪意ある者があなたのサイトを開いてinput内に以下のような入力をした上で、あなたのページへのリンクをデスクトップに作成しておいたとしましょう。

text
1<script>alert('ウイルスの脅威にさらされています')</script>

そのPCでリンクを開いてしまったユーザーは、
あなたのサイトで突如悪意あるスクリプトが実行される被害にあいます。

ウィルスを仕込んだのは第三者であるにも関わらず、あなたのサイトから悪意ある任意のリクエストが実行できるのは、危険な脆弱性になります。

回答

さて、ご質問の内容の回答ですが、不明な数のinputが存在する場合でも、配列を利用するなどして対処できると思います。localStrage に配列を格納する場合は、JSON形式に変換して格納できます。
例えば、以下のように書けます。

html
1<body>
2  <div id="divTest"></div>
3  <button id="append">inputを追加</button>
4</body>

javaScript
1$(function(){
2  // ページから離れる際に実行するスクリプト
3  $(window).on("beforeunload", function(){
4    const data = $("#divTest>input")
5      .map(function(){ return $(this).val() })
6      .get();
7    /* 配列をJSON 形式に変換して格納 */
8    localStorage.setItem("divData", JSON.stringify(data));
9  });
10
11  //ページ読み込み時に復元するスクリプト
12  {
13    const data = localStorage.getItem("divData") || "['']";
14    /* JSON から配列に復元 */
15    JSON.parse(data)
16      .map(function(d){ return $("<input>").val(d) })
17      .forEach(function($el){ $el.appendTo("#divTest") })
18  }
19
20  //ボタンクリックでinputを追加
21  $("#append").on("click", function(){ $("#divTest").append($("<input>")) })
22});