Question

我有几个输入字段需要转换为数组才能将它们保存到本地存储。

一个小脚本（jQuery）会扫描所有输入字段，并根据输入字段ID确定其名称。

HTML：

<input class="field" type="checkbox" id="field-01"> I have done it!
<input class="field" type="text" id="field-02"> Comment on how it went?

JS：

function dataSave(){
   $(".field").each(function(formField){
      var formFieldLoad = $(this).val(localStorage.field);
      formField = $(formField).val(this);
   });
}

所以基本上我需要将输入字段（复选框，单选按钮，滑块（值属性驱动）和文本字段）中的数据和值驱动到数组中的本地存储，以便保存所有内容而不是只是最后一个领域。我怎样才能做到这一点？

此外，如果选中或不选中复选框，则需要检查复选框，而文本字段需要保存其内容。这会导致保存进度出现问题吗？

更新：我试图将所有字段转换为数组，但我不知道如何进一步使用该数组将其传递给本地存储。我已经浏览了整个互联网，我开始认为有很多方法可以做到这一点，但我无法弄清楚什么是适合我案例的解决方案。

Answer 1

通常，您需要使用.each在JSON对象中添加所有值和ID，然后将JSON.stringify()与localStorage.setItem()一起使用，将它们放在本地存储中：

<input class="field" type="checkbox" id="field-01"> I have done it!
<input class="field" type="text" id="field-02"> Comment on how it went?
<input type="button" value="Save to LS" onclick="dataSave()">
<script>
    function dataSave(){
        var fields = {};
        $('.field').each(function(){
            fields[this.id] = this.value;
        })
        localStorage.setItem('fieldString',JSON.stringify(fields));

        console.log(localStorage.getItem('fieldString'));               // Output: {"field-01":"on","field-02":"1234"}
        console.log(JSON.parse(localStorage.getItem('fieldString')));   //Output: Object {field-01: "on", field-02: "1234"}
    }
</script>

如果将来需要该对象，可以轻松获取localStorage.getItem('fieldString')

的字符串

Answer 2

要保留数据，请使用localStorage.setItem(key, value)。然后可以使用localStore.getItem(key)进行检索。

需要注意的一点是localStorage存储文本数据。如果你想持久化对象，你必须先对它们进行编码，然后再保留它们并在你检索它们之后解码它们：

> test={a:1, b:2}
< Object {a: 1, b: 2}
> localStorage.setItem("test", test)
< undefined
> localStorage.getItem("test")
< "[object Object]"                                     // that's not very interesting
> localStorage.setItem("test", JSON.stringify(test))
< undefined
> JSON.parse(localStorage.getItem("test")) 
< Object {a: 1, b: 2}                                   //that's better

另一个重要的点是localStorage.setItem可以抛出异常。例如，Opera如果处于私有browsin模式，将始终抛出异常。你会想要抓住这些。

针对您的具体问题，我建议您将字段存储为Object的属性，并将其存储在localStorage中：

function dataSave(){
   var formData = {};
   $(".field").each(function(formField){
      formData[this.id] = this.value;
   });
   try {
       localStorage.setItem("formData", JSON.stringify(formData));
   } catch (err) {
       console.log("Couldn't persist formData : " + err);
   }
}

将输入字段转换为数组并保存到本地存储

2 个答案: