javascript - 如何使用本地存储一次将所有输入字段值存储在一个包装器中？

Question

假设我有以下内容:

<div id="main">
    <div id="wrapper">
        <input/>
        <input/>
        <input/>
    </div>
</div>

我想使用本地存储来存储整个包装器。我正在这样做:

function save(){
    var nodeWrapper = $("#wrapper").html();
    localStorage.setItem("wrapper", nodeWrapper);
}


function restore(){
    var nodeWrapper = localStorage.getItem("wrapper");
    $("#wrapper").html(nodeWrapper);
}

问题1:我发现输入中的值没有被存储。我只得到这三个输入。我知道我可以一一存储这些输入，但是如何一次存储它们呢？例如:我的包装器下有更多字段，除了一一存储之外，还有其他方法可以轻松存储它们吗？

Q2:我还发现如果我存储节点本身而不是它的innerHTML，它就不起作用。 localstorage可以存储节点吗？

Answer 1

试试这个 http://jsfiddle.net/lotusgodkk/GCu2D/103/ :不要使用 .html()，而是使用 append() 或 prepend()

$(document).ready(function () {   
   localStorage.setItem("wrapper", $('#main').html());
   var nodeWrapper = localStorage.getItem("wrapper");
   $('#main').append(nodeWrapper);
});

如果您只需要输入值及其名称，则可以使用serializeArray():

$('#wrapper input').serializeArray();

它将返回一个数组，其中包含输入的名称和值。

HTML:

<div id="main">
  <div id="wrapper">
    <input value="1" name="a" />
    <input value="2" name="b" />
    <input value="3" name="c" />
  </div>
</div>