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

假设我有以下几点：

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

问题1：我发现输入中的值没有被存储。我只得到三个输入。我知道我可以一个接一个地存储这些输入，但如何一次存储所有输入？例如：我的包装下有更多的字段，除了一个接一个地存储它们之外，还有什么方法可以方便地存储它们吗

问题2：我还发现，如果我存储节点本身而不是它的innerHTML，那么它就不起作用了。localstorage是否可以保存节点？

请尝试以下操作： 不要使用.html（），而是使用

append（）

或

prepend（）

如果只需要输入值及其名称，可以使用serializeArray（）：

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

HTML:

---

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

---

它不会存储您在页面上更改的值。您可以尝试在一个按钮上绑定上面的脚本，将页面上的1更改为4，然后单击该按钮。如果要更改值，建议您在输入上使用serializeArray（）。它将在数组中存储名称-值对，您可以将该数组存储在LocalStorageHTML中。您是否尝试了innerHTML而不是jquery的html（）？谢谢！我一直在想怎么做

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


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

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

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

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

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