JSON 数组对象在本地存储中被覆盖答案

【问题标题】：JSON array object is overwritten in the localstorageJSON 数组对象在本地存储中被覆盖
【发布时间】：2017-06-06 20:58:08
【问题描述】：

我正在创建一个表单页面，其中有 3 个输入字段："fname","emailId","phoneNo"。

现在，每次用户在表单页面中输入详细信息但对象被覆盖时，我都会将它们存储在 localStorage 中。它的脚本是：

<script>
$(document).ready(function(){

    var jsonArr=[];
    $('#addVendor').submit(function(){

        var fname=$('#addVendor').find('input[name="first_name"]').val();
        var emailId=$('#addVendor').find('input[name="email_id"]').val();
        var phoneNo=$('#addVendor').find('input[name="phone_no"]').val();
        var jsonObj={};
        jsonObj["fname"]=fname;
        jsonObj["emailId"]=emailId;
        jsonObj["phoneNo"]=phoneNo;
        jsonArr.push(jsonObj);
        localStorage.setItem("userInfo", JSON.stringify(jsonArr));
    });

});
</script>

localStorage 中保存的格式是：

[{"fname":"hello","emailId":"hello","phoneNo":"4564564"}]

如果我尝试将另一个对象附加到它，它不是附加而是覆盖它而不是添加到它。如何将对象附加到已在 localStorage 中的对象？

【问题讨论】：

标签： jquery arrays json local-storage

【解决方案1】：

在您的代码中，您只是将存储数据替换为 jsonArr 变量数据。 LocalStorage 以字符串的形式存储数据。因此，为了附加到它，您需要首先获取数据解析它并附加和字符串化并再次存储它

var localStorageData = JSON.parse(localStorage.getItem("userInfo"));
 localStorageData.push(jsonObj);
 localStorage.setItem("userInfo", JSON.stringify(localStorageData));

【讨论】：

【解决方案2】：

您需要先读取 jsonArr 中本地存储的内容，因为您从空数组开始，它会被覆盖。

代替：

 var jsonArr=[];

用途：

 var jsonArr=localStorage.getItem("userInfo");

【讨论】：