HTML5 local storage JSON multiple objects

Question

Does anyone know, if it's possible to make a local storage with multiple objects in it when I'm doing a loop in javascript?

At the moment my code looks like this:

var albums = '';
var album_list = '';

$.each(data, function(i,item){
   var name = item.name;
   albums += '<li>'+item.name+'</li>';

   var album_content = {name: item.name, uid: 1};
   var album_content = album_content+',';

   album_list += album_content;


});

var album_list = '['+album_list+']';   
localStorage.setItem("albums", JSON.stringify(album_list));
var albums_l = JSON.parse(localStorage.getItem("albums"));

$.each(albums_l, function(i,item){
   console.log(item.name);
});

But that gives me an error. Anyone have a better solution for this, so I just have one localstorage and all the data in that?

Sirko · Accepted Answer · 2012-04-27 08:29:11Z

You're mixing objects and strings in your code. Your album_content is initialized in the loop as an object ({name: item.name, uid: 1}). In the very next line you treat it as a string by appending a comma.

Overall use an array to collect all your objects. It's (almost) always better to use the native objects instead of trying to emulate them in some way.

Try this code instead.

var albums = '';
var album_list = [];

$.each(data, function(i,item){
   var name = item.name;
   albums += '<li>'+item.name+'</li>';

   var album_content = {name: item.name, uid: 1};
   // remove that line completly
   // var album_content = album_content+',';

   album_list.push( album_content );

});


localStorage.setItem("albums", JSON.stringify( album_list ));
var albums_l = JSON.parse(localStorage.getItem("albums"));

$.each(albums_l, function(i,item){
   console.log(item.name);
});

noob · Accepted Answer · 2012-04-27 08:31:02Z

What's wrong:

var albums = '';
var album_list = '';

$.each(data, function(i,item){
   var name = item.name;
   albums += '<li>'+item.name+'</li>';

   var album_content = {name: item.name, uid: 1};

   // at this point album_content is an object.. so it will be this string afterwards: "[object Object],"
   var album_content = album_content+',';

   album_list += album_content; //you're adding "[object Object],"


});

// album_list will now look like this: '["[object Object],[object Object],"]'
var album_list = '['+album_list+']';
localStorage.setItem("albums", JSON.stringify(album_list));
var albums_l = JSON.parse(localStorage.getItem("albums"));

$.each(albums_l, function(i,item){
   console.log(item.name);
});

How to do it correct:

var albums = '';
var album_list = [];

$.each(data, function(i,item){
   var name = item.name;
   albums += '<li>'+item.name+'</li>';

   var album_content = {name: item.name, uid: 1};

   album_list.push(album_content);


});

localStorage.setItem("albums", JSON.stringify(album_list));
var albums_l = $.parseJSON(localStorage.getItem("albums"));

$.each(albums_l, function(i,item){
   console.log(item.name);
});

Collectives™ on Stack Overflow

HTML5 local storage JSON multiple objects

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related