如何使用对象的值更新数组？ [复制]

Question

myObj 存储来自用户的输入，该输入被推送到 arr，该输入作为“数据”键存储在 localStorage 中。在提交时，我希望将新值添加到 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

需要注意的一点是 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 2

你的错误：

1. arr，尽管它的名字，不是一个数组。
2. 您永远无法恢复保存的数据

检查下面的代码，看看我对这个问题的看法：（在尝试之前，你应该擦除你的 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 3

你需要使用这样的东西：

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

Answer 4

先阅读localstorage文档如何使用：https://developer.mozilla.org/tr/docs/Web/API/Window/localStorage 在从 localstorage 获取数据数组后，您必须将数据数组推送到 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 5

你只需要使用这个：

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

而不是你的 if / else 语句。