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];
    });
}

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

2 个答案: