Question

myObj存储来自用户的输入，该输入被推送到存储在localStorage中的arr作为“数据”键。在提交时，我希望将新值添加到arr中而不要覆盖它（在else部分中）。以下代码可以工作，但是会覆盖旧数据：

var myObj = {
    field1: fname.value,
    field2: lname.value,
    field3: birth.value,
    field4: salary.value,
    field5: String(selectedGender),
    field6: String(choicesOfHobby),
    field7: color.value,
    field8: String(choicesCountry),
    field9: textArea.value
}  
    const arr = new Array()
if (window.localStorage.length == 0) {
   const arr = JSON.stringify(myObj); 
   window.localStorage.setItem('data', arr);
} else {
    const arr = JSON.stringify(myObj); 
   window.localStorage.setItem('data', arr);
}

Answer 1

您的错误：

arr，尽管它的名字不是数组。
您永远不会恢复保存的数据

检查下面的代码以了解我的问题：（尝试之前，您应该清除localStorage）

var myObj = {
    field1: fname.value,
    field2: lname.value,
    field3: birth.value,
    field4: salary.value,
    field5: String(selectedGender),
    field6: String(choicesOfHobby),
    field7: color.value,
    field8: String(choicesCountry),
    field9: textArea.value
}
const array = window.localStorage.data || []; // get your saved array, or create a new one
array.push(myObj); // Add the current item to the array  
window.localStorage.setItem('data', JSON.stringify(array)); // save it again

还有其他问题请问

Answer 2

您需要使用以下内容：

let data = localStorage.getItem('data');
let dataObj = JSON.parse(data);
dataObj[fieldKey] = fieldObj;
localStorage.setItem('data', JSON.stringify(dataObj));

Answer 3

首先阅读localstorage文档的用法：https://developer.mozilla.org/tr/docs/Web/API/Window/localStorage 从本地存储获取数据阵列后，您必须将数据阵列推送到本地存储并将对象推送到数据阵列。最后，不要忘记再次将数据数组设置为localstorage。您的本地存储部件代码应如下所示：

    var data = JSON.parse(window.localStorage.getItem("data"));
    if(data === null){
     data = [];
    }
    data.push(myObj);
    window.localStorage.setItem("data",JSON.stringfy(data));

Answer 4

要注意的一件事是JSON.stringify返回一个字符串，而不是一个数组-并且，localStorage方便地将键/值对存储在值是字符串的地方，因此这一切都按预期进行。

要更新localStorage中的值，您可以首先检索它，然后根据需要修改它，然后再次存储它。由于您正在使用javascript对象，因此需要使用JSON.parse和JSON.stringify在对象（使用）和字符串（存储）之间来回转换。此模式如下：

let retrievedString = localStorage.getItem('data');
let retrievedObject = JSON.parse(retrievedString); // convert string to obj
let oldColor = retrievedObject.field7; // we don't actually use oldColor
let newColor = "#666666"; 
retrievedObject.field7 = newColor; //change existing property
retrievedObject.field99 = "99"; // add new property
let modifiedString = JSON.stringify(retrievedObject); // ready to store new version
localStorage.setItem('data', modifiedString);

我在代码示例中添加了更多内容，以阐明在转换回字符串并最终替换存储中的旧版本之前可以对检索到的对象执行的操作。

Answer 5

您只需要使用此：

arrInStorage = localStorage.getItem('data') || [];
arr = JSON.parse(arrInStorage);
arr.push(myObj);
localStorage.setItem('data', JSON.stringify(arr));

代替您的if / else语句。

如何使用对象的值更新数组？

5 个答案: