将数据附加到 localStorage 对象

Question

我正在尝试向当前的 localStorage 对象添加一个新对象，但未成功。最后，我没有在 localStorage 中有两组数据，而是得到最后一组。关于我做错了什么的任何见解？谢谢

这是我想要做的：

// add the first student
var newStudent = [{
     "name":        "John",
     "age":         21,
     "nationality": "Spanish"
 }];

localStorage.setItem("students", JSON.stringify(newStudent));


// Retrieve the object from storage to add a new student
var retrievedObject = localStorage.getItem("students");
var stored          = JSON.parse(retrievedObject);

// add a new student
var newStudent2 = [{
    "name":        "Mary",
    "age":         20,
    "nationality": "German"
}];
var stored = Object.assign(stored, newStudent2);

// Update the storage
localStorage.setItem("students", JSON.stringify(stored));
var result = localStorage.getItem("students");

console.log(result);

Answer 1

你应该存储数组，而不是对象；

var students = [];

var student1 = { s: 1 };

students.push(student1);

localStorage.setItem("students", JSON.stringify(students));

var stored = JSON.parse(localStorage.getItem("students"));

var student2 = { s: 2 };

stored.push(student2);

localStorage.setItem("students", JSON.stringify(stored));

var result = JSON.parse(localStorage.getItem("students"));

console.log(result);

Answer 2

在从 localStorage 取回存储的对象时，您正在用 newStudent2 替换存储的对象：

var newStudent = [{
     "name":        "John",
     "age":         21,
     "nationality": "Spanish"
 }];

localStorage.setItem("students", JSON.stringify(newStudent));

var retrievedObject = localStorage.getItem("students");
var stored          = JSON.parse(retrievedObject); <----newStudent1

var newStudent2 = [{
    "name":        "Mary",
    "age":         20,
    "nationality": "German"
}];


var stored = Object.assign(stored, newStudent2); <----Here newStudent1 is replaced by newStudent2


localStorage.setItem("students", JSON.stringify(stored)); // Here newStudent2 is replacing old object on localStorage
var result = localStorage.getItem("students");

console.log(result);

您可以尝试创建一个对象数组并在创建新对象时附加它们。

var objects = []
objects.push(stored) 

localStorage.setItem('students', JSON.stringify(objects))

Answer 3

您使用 Object.assign() 错误。有关它的信息，请参阅here。

您真的需要 newStudent2 成为单个对象的数组吗？如果不是，您可以简单地执行stored.push(newStudent2)，其中newStudent2 是一个对象，而不是具有单个对象的数组。

所以，类似：

var students = [];

// add the first student
// Notice how the student is now an object and not an array containing an object.
var newStudent = {
     "name":        "John",
     "age":         21,
     "nationality": "Spanish"
 };

students.push(newStudent);

localStorage.setItem("students", JSON.stringify(students));


// Retrieve the object from storage to add a new student
var retrievedObject = localStorage.getItem("students");
var stored          = JSON.parse(retrievedObject);

// add a new student
// Notice how the student is now an object and not an array containing an object.
var newStudent2 = {
    "name":        "Mary",
    "age":         20,
    "nationality": "German"
};

stored.push(newStudent2);

// Update the storage
localStorage.setItem("students", JSON.stringify(stored));
var result = localStorage.getItem("students");

console.log(result);

Answer 4

根据MDNThe Object.assign() method only copies enumerable and own properties from a source object to a target object

在你的情况下： var stored = JSON.parse(retrievedObject); 返回数组，你可以将 push 新对象添加到数组中：stored.push(newStudent2); 并将 stored 设置为 localStorage。