web-dev-qa-db-ja.com

localStorageオブジェクトにデータを追加します

現在のlocalStorageオブジェクトに新しいオブジェクトを追加しようとしていますが失敗しました。最後に、localStorageに2セットのデータがある代わりに、最後のデータセットを取得します。私が間違っていることについての洞察はありますか？ありがとう

これが私がやろうとしていることです：

// 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);
javascriptjqueryobjectlocal-storage
5
McRui

オブジェクトではなく配列を格納する必要があります。

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);
7
Sergey Yarotskiy

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))
3
Diego Gallegos

Object.assign()を間違って使用しています。詳細については、 ここ を参照してください。

_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);
_
2
Dimitris Karagiannis

[〜＃〜] mdn [〜＃〜]The Object.assign() method only copies enumerable and own properties from a source object to a target objectによると

あなたの場合：var stored = JSON.parse(retrievedObject); return array、Push new object to array：stored.Push(newStudent2); and when set stored to localStorage。

1
zooblin