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

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

要持久化数据，请使用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 在私有浏览模式下总是会抛出异常。你会想抓住这些。

对于您的具体问题，我建议您将字段存储为对象的属性，然后将其存储在 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);
   }
}

Answer 2

一般来说，您需要使用 .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')得到字符串