CODEWITHSUNDEEP
javascriptjqueryobjectlocal-storage
McRui
McRui

Reputation: 1931

Append data to localStorage object

I'm trying, unsuccessfully, to add a new object to a current localStorage object. Instead of, at the end, having two sets of data in localStorage, I get the last one. Any insight on what I'm doing wrong? Thanks

Here's what I'm trying to do:

// 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);

Upvotes: 6

Views: 36462

Answers (4)

zooblin
zooblin

Reputation: 2480

According to MDN The Object.assign() method only copies enumerable and own properties from a source object to a target object

in your case: var stored = JSON.parse(retrievedObject); return array, you can just push new object to array: stored.push(newStudent2); and when set stored to localStorage.

Upvotes: 1

Diego Gallegos
Diego Gallegos

Reputation: 1752

You are replacing the stored object by newStudent2 when fetching it back from localStorage:

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

You can instead try creating an array of objects and appending them whenever creating a new one.

var objects = []
objects.push(stored) 

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

Upvotes: 5

Dimitris Karagiannis
Dimitris Karagiannis

Reputation: 9358

You are using Object.assign() wrong. See here for info about it.

Do you really need newStudent2 to be an array of a single object? If not you can simply do stored.push(newStudent2), where newStudent2 is an object and not an array with a single object.

So, something like:

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

Upvotes: 3

Sergey Yarotskiy
Sergey Yarotskiy

Reputation: 4804

You should store array, not an object;

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

Upvotes: 20

Related Questions