How to load a jPlayer playlist from localStorage on page load?

Question

I've been attempting to do this seemingly easy task of loading a jPlayer playlist from current users' localStorage.

Basically, I'd like for our users to be able to add items to their playlist, which then gets stored to their localStorage. When the user browses through each post/page on the website, their saved playlist reloads from localStorage so that they don't have to keep creating the playlist over and over again.

The way I have it set up now is that upon clicking the Add to Playlist button under each item, that item is added to the playlist and also stored in localStorage under the key "localPlaylist".

Here is the snippet that does the adding to playlist:

/* ADD INDIVIDUAL TRACKS TO PLAYLIST */
$(".addtolist").click(function () {

var addbutton  =   $(this);
var mp3id       =   addbutton.data('mp3file');
var songtitle   =   addbutton.data('mp3title');

myPlaylist.add({ title: songtitle, artist: "Right Beat Radio", mp3: mp3id });

// Save playlist to LocalStorage
if (!localStorage) { return false; }
localStorage.setItem('localPlaylist', JSON.stringify(myPlaylist.playlist));

});

As you can see, I'm saving the playlist items to "localPlaylist" with this method:

// Save playlist to LocalStorage
if (!localStorage) { return false; }
localStorage.setItem('localPlaylist', JSON.stringify(myPlaylist.playlist));

As an example, once these items are stored, they look like this:

[{"title":"Mauvais Temps","artist":"Right Beat Radio","mp3":"/mp3s/MauvaisTemps.mp3"},{"title":"Line Steppers","artist":"Right Beat Radio","mp3":"/mp3s/LineSteppers.mp3"},{"title":"Try My Best","artist":"Right Beat Radio","mp3":"/mp3s/TryMyBest.mp3"},{"title":"San Ignacio","artist":"Right Beat Radio","mp3":"/mp3s/SanIgnacio.mp3"}]

All of that is great and wonderful. But now, when I visit another page, how in the world do I recall this information and repopulate the playlist using this localStorage information?

Here is the code that is called on document ready which sets up the new jPlayer. This actually may be the problem:

$(document).ready(function(){

  var myPlaylist = new jPlayerPlaylist({
    jPlayer: "#jplayer_N",
    cssSelectorAncestor: "#jp_container_N"
  }, [
        {
            title:"",
            artist:"",
            mp3:"",
            oga:"",
            poster: ""
        }
    ], {
    playlistOptions: {
      enableRemoveControls: true,
      autoPlay: false
    },
    swfPath: "js/jPlayer",
    supplied: "webmv, ogv, m4v, oga, mp3",
    smoothPlayBar: true,
    keyEnabled: true,
    audioFullScreen: false
  });

});

Obviously, the above code is setting up a jPlayer with a blank playlist, waiting for users to add something to it.

So, to sum it all up, we wanted to store playlist items when a user adds a new song to the playlist. We've accomplished that (yay!).

Now we'd like to recall that stored information from localStorage, stored under key name "localPlaylist", and repopulate the playlist when a user reloads a page on our website.

Can anyone please help us out? Thanks so much in advance!

Answer 1

I have figured it out with a very simple change. I altered the code that sets up a new jPlayer on document load. Here is the code that loads the playlist from localStorage:

$(document).ready(function(){

  var myPlaylist = new jPlayerPlaylist({
    jPlayer: "#jplayer_N",
    cssSelectorAncestor: "#jp_container_N"
  }, JSON.parse(localStorage.getItem('localPlaylist')), {
    playlistOptions: {
      enableRemoveControls: true,
      autoPlay: false
    },
    swfPath: "js/jPlayer",
    supplied: "webmv, ogv, m4v, oga, mp3",
    smoothPlayBar: true,
    keyEnabled: true,
    audioFullScreen: false
  });
});

As you can see, we simply added the following code in place of the predefined playlist items:

JSON.parse(localStorage.getItem('localPlaylist'))

Now the playlist is populating from the users' localStorage!

---

So, to summarize for those who are attempting the same thing --

To save playlist to localStorage:

localStorage.setItem('localPlaylist', JSON.stringify(myPlaylist.playlist));

To load playlist from localStorage:

JSON.parse(localStorage.getItem('localPlaylist'))

Creating new jPlayer instance using localStorage playlist:

$(document).ready(function(){

  var myPlaylist = new jPlayerPlaylist({
    jPlayer: "#jplayer_N",
    cssSelectorAncestor: "#jp_container_N"
  }, JSON.parse(localStorage.getItem('localPlaylist')), {
    playlistOptions: {
      enableRemoveControls: true,
      autoPlay: false
    },
    swfPath: "js/jPlayer",
    supplied: "webmv, ogv, m4v, oga, mp3",
    smoothPlayBar: true,
    keyEnabled: true,
    audioFullScreen: false
  });
});

Happy coding! :)