テキストエリアなどの複数のフィールドに記入された値を保存したい

Question

下記コードは、追加ボタンを押すと input と 削除ボタンが追加され inputに入力するとlocalStorageに自動で保存されます。

これをinputではなくtextareaで実現できないでしょうか。

javascriptの知識がありません。見よう見まねで編集してみたのですが時間ばかりが過ぎてしましました。どうかご教授お願いいたします。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>


  <button id="add">追加</button>
  <button id="reset">リセット</button>
  <ul id="foo"></ul>

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>

<input id="new" type="button" value="new">
<input id="new1" type="button" value="new1">        
<input id="del" type="button" value="選択のテキストエリアを削除">   
<input id="clear-outline" type="button" value="全て削除" onclick="location.reload();">   

<table>
<ul id="jquery-ui-sortable" >
</ul>    
</table>

<script>

var initData  = [];
  var listString = "";

  function initialize(){
    $.each(initData, function(key, value) {
      $("#foo").prepend('<li><input type="text"><button class="delete">削除</button></li>');
    });
  }

  if (localStorage.getItem("foo")) {
    $("#foo").html(localStorage.getItem("foo"));
  } else {
    initialize();
  }

  $("#add").click(function() {
    $("#foo").prepend('<li><input type="text"><button class="delete">削除</button></li>');
    localStorage.setItem("foo", $("#foo").html());
  });

  $("#foo").on("keyup", ":input", function(){
    $.each($("input"), function(key, input){
      $(input).attr("value", $("<div/>").text(input.value).html());
    });
    localStorage.setItem("foo", $("#foo").html());
  });

  $("#foo").on("click", ".delete", function() {
    $(this).parent().remove();
    localStorage.setItem("foo", $("#foo").html());
  });

  $("#reset").click(function(){
    $("#foo").empty();
    initialize();
    localStorage.setItem("foo", $("#foo").html());
  });
<script>

Answer 1

やってることはinputとかわりありませんが。

html

<textarea id="hoge"></textarea>

js

$("#hoge").on("keyup",function(){
	localStorage.setItem("hoge", $("#hoge").val());
})

@追記
こうだとどうでしょう。

/* 
  function initialize(){
    $.each(initData, function(key, value) {
      $("#foo").prepend('<li><input type="text"><button class="delete">削除</button></li>');
    });
  }

  $("#add").click(function() {
    $("#foo").prepend('<li><input type="text"><button class="delete">削除</button></li>');
    localStorage.setItem("foo", $("#foo").html());
  });

  $("#foo").on("keyup", ":input", function(){
    $.each($("input"), function(key, input){
      $(input).attr("value", $("<div/>").text(input.value).html());
    });
    localStorage.setItem("foo", $("#foo").html());
  });
*/

  function initialize(){
    $.each(initData, function(key, value) {
      $("#foo").prepend('<li><textarea></textarea><button class="delete">削除</button></li>');
    });
  }

  $("#add").click(function() {
    $("#foo").prepend('<li><textarea></textarea><button class="delete">削除</button></li>');
    localStorage.setItem("foo", $("#foo").html());
  });

  $("#foo").on("keyup", ":input", function(){
    $.each($("textarea"), function(key, input){
      $(input).text($(input).val())
    });
    localStorage.setItem("foo", $("#foo").html());
  });

３つほど関数を修正
valueじゃなくてDOMそのものをstoreしてたんですね。。。

Comments

[suisuin]

早速のお返事ありがとうございます。
試してみたのですが、textareaに入力した内容が自動保存されませんでした。

回答の間に下記を挟んで編集してみたりしたのですが保存が確認できませんでした。
$.each($("input"), function(key, input){
$(input).attr("value", $("<div/>").text(input.value).html());
});

[Neko_doshi]

追記しました。
https://jsfiddle.net/u1nfpqve/1/

[suisuin]

できました！ありがとうございます。
ネットで調べながら日数を費やし、基本が理解できていないことで実現できずかなり参ってました。
心よりお礼申し上げます。