I am trying to use LocalStorage to store an array that contains objects. Right now the following code is returning an object on the console and not returning as an array. This means that my ion-list cannot read it. Is there any way around this and getting back the value as an array with my objects in the array? The object presentation contains multiple things such as ID, title, etc etc. I want to be able to store multiple presentations in the array and be able to access each one and display them in the ion list.

Manager.js

 playlistService.addPlaylistAll = function (presentation) {

      console.log("setting item");
        var playlistarraytest = [];
      playlistarraytest.push(presentation);
      console.log("array first!! ", playlistarraytest);
      localStorage.setItem('playlisttest', playlistarraytest);
        playlistService.refresh();
      var test = localStorage.getItem('playlisttest');
       console.log(test);
}

Playlist.html

 <ion-list ng-repeat="presentation in dayOne = (playlist | filter: { day: 1 } | orderBy: 'start_date')">

I am trying to use LocalStorage to store an array that contains objects. Right now the following code is returning an object on the console and not returning as an array. This means that my ion-list cannot read it. Is there any way around this and getting back the value as an array with my objects in the array? The object presentation contains multiple things such as ID, title, etc etc. I want to be able to store multiple presentations in the array and be able to access each one and display them in the ion list.

Manager.js

 playlistService.addPlaylistAll = function (presentation) {

      console.log("setting item");
        var playlistarraytest = [];
      playlistarraytest.push(presentation);
      console.log("array first!! ", playlistarraytest);
      localStorage.setItem('playlisttest', playlistarraytest);
        playlistService.refresh();
      var test = localStorage.getItem('playlisttest');
       console.log(test);
}

Playlist.html

 <ion-list ng-repeat="presentation in dayOne = (playlist | filter: { day: 1 } | orderBy: 'start_date')">

• javascript
• arrays
• angularjs
• ionic-framework
• local-storage

1 Answer 1

You cannot store data structures directly in LocalStorage. LocalStorage only stores strings. So you must use:

let json = JSON.stringify(playlistarraytest);
localStorage.setItem('playlisttest', json);

And then to retrieve it use:

var test = localStorage.getItem('playlisttest');
let arr = JSON.parse(test);
console.log(arr);