Cannot push objects in array in localStorage

Question

I am trying to store localStorage value in array and following this page Push JSON Objects to array in localStorage. My code is:

function SaveDataToLocalStorage(data)
{
 var a = [];
 // Parse the serialized data back into an aray of objects
 a = JSON.parse(localStorage.getItem('session'));
 // Push the new data (whether it be an object or anything else) onto the array
 a.push(data);
 // Alert the array value
 alert(a);  // Should be something like [Object array]
 // Re-serialize the array back into a string and store it in localStorage
 localStorage.setItem('session', JSON.stringify(a));
}

where data is:

 var data = {name: "abc", place: "xyz"}

I am getting the following error:

 Uncaught TypeError: Cannot call method 'push' of null

Can anybody show the correct method to store localStorage values in array?

The variable "a" must be null. Use the debugger in your browser and check the value before the push call is run. I think that should put you on the right track — drew_w
– drew_w, Commented Jan 5, 2014 at 17:10

serakfalcon · Accepted Answer · 2014-01-05 18:13:59Z

null is a special value for objects that aren't initialized to anything. My guess is that localStorage.getItem('session') is empty.

a more robust answer would be something like

function SaveDataToLocalStorage(data)
{
    var a;
    //is anything in localstorage?
    if (localStorage.getItem('session') === null) {
        a = [];
    } else {
         // Parse the serialized data back into an array of objects
         a = JSON.parse(localStorage.getItem('session'));
     }
     // Push the new data (whether it be an object or anything else) onto the array
     a.push(data);
     // Alert the array value
     alert(a);  // Should be something like [Object array]
     // Re-serialize the array back into a string and store it in localStorage
     localStorage.setItem('session', JSON.stringify(a));
}

var a = JSON.parse(localStorage.getItem('session')) || [];

Pointy · Accepted Answer · 2014-01-05 18:23:19Z

1

You're overriding the initial empty array that initializes "a" when you fetch the local storage contents. The variable is declared and initialized:

var a = [];

and then that empty array is immediately thrown away:

a = JSON.parse(localStorage.getItem('session'));

After that, it appears that your retrieved value is actually empty (null) if you're getting that error.

If you want "a" to be either a new empty array, or else an array saved in local storage, you'd do something like this:

var a = localStorage.getItem('session') || "[]";
a = JSON.parse(a);

edited Jan 5, 2014 at 18:23

answered Jan 5, 2014 at 17:11

Pointy

415k62 gold badges600 silver badges631 bronze badges

7 Comments

Pointy Over a year ago

@user2567857 the problem may be that you're not actually saving the object successfully.

user2567857 Over a year ago

You mean the variable data ?

Pointy Over a year ago

@user2567857 no - if "a" is ending up null then that means that there wasn't anything in local storage with the key "session".

user2567857 Over a year ago

Yeah, that it because the solution I am following (as pointed out in my question), is doing getItem first and then setItem

Pointy Over a year ago

@user2567857 OK answer extended with a possibility.

|

Collectives™ on Stack Overflow

Cannot push objects in array in localStorage

2 Answers 2

1 Comment

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Linked

Related