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?

Answer 1

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