Question

So I am trying to store an array of objects into localStorage, as follows:-

EDIT: The following is part of a function that is called in a loop.

c = [{"name":nameDOM.value,"add":+addDOM.value,"town":townDOM.value,"post":postalDOM.value,"mob":mobDOM.value}];
cData = cData.concat(c);
localStorage.setItem('cData', cData);

However, after a page refresh, when I try to access data from the objects, it is apparently undefined. Accessing data from the objects is fine before a refresh.

I am accessing the data in the following manner:-

//Table code omitted.
var text = document.createTextNode(""+cData[i].name+", "+cData[i].add+", "+cData[i].town+", "+cData[i].post+", "+cData[i].mob+"");

I have been trying to debug the problem using Chromes Javascript tools, as well as inserting alerts into various places to monitor the state of the variables; still undefined.

Answer 1

You’ve made an oopsies. Try:

c = [{"name":nameDOM.value,"add":+addDOM.value,"town":townDOM.value,"post":postalDOM.value,"mob":mobDOM.value}];
cData = cData.concat(c);
localStorage.setItem('cData', JSON.stringify(cData));

They difference being that you are turning your array of objects into a json string that can be parsed later by your code using:

eval(localStorage.getItem('cData'));