如何使用localstorage一次性将所有输入字段值存储在一个包装器中

Question

假设我有以下内容:

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

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

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

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

Q1:我发现输入中的值没有被存储。我只得到三个输入。我知道我可以一个一个地存储这些输入，但我怎么能一次存储它们呢?例如:我在包装器下有更多的字段，除了逐个存储之外，还有什么方法可以轻松地存储它们吗?

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>

Answer 2

最直接的方法可能是将数组的值存储为JSON编码的字符串。这意味着遍历输入以存储和恢复值，并对JSON字符串进行编码和解码。当您使用jQuery时，答案也将使用jQuery http://jsfiddle.net/FC2pc/1/

function save() {
    var values = [];
    $("#wrapper input").each(function (i, e) {
        values.push(e.value);
    });
    localStorage.setItem('input_cache', JSON.stringify(values));
}
function restore() {
    var values = $.parseJSON(localStorage.getItem('input_cache'));
    $("#wrapper input").each(function (i, e) {
        e.value = values[i];
    });
}