如何在页面加载时从 localStorage 加载 jPlayer 播放列表？

Question

我一直在尝试完成这个看似简单的任务，即从当前用户的 localStorage 加载 jPlayer 播放列表。

基本上，我希望我们的用户能够将项目添加到他们的播放列表，然后将其存储到他们的 localStorage。当用户浏览网站上的每个 post/page 时，他们保存的播放列表会从 localStorage 重新加载，这样他们就不必一遍又一遍地创建播放列表。

我现在的设置方式是，单击每个项目下的“添加到播放列表”按钮后，该项目就会添加到播放列表中，并存储在 [=44= 键下的 localStorage 中].

这是添加到播放列表的代码片段：

/* 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));

});

如您所见，我正在使用以下方法将播放列表项目保存到 "localPlaylist"：

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

例如，存储这些项目后，它们看起来像这样：

[{"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"}]

这一切都很棒。但是现在，当我访问另一个页面时，我究竟该如何调用此信息并使用此 localStorage 信息重新填充播放列表？

这是在 文档就绪 上调用的代码，它设置了新的 jPlayer。这实际上可能是问题所在：

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

});

显然，上面的代码设置了一个带有空白播放列表的 jPlayer，等待用户向其中添加内容。

因此，总而言之，我们希望在用户将新歌曲添加到播放列表时存储播放列表项。我们已经做到了（耶！）。

现在我们想从 localStorage 中调用存储的信息，存储在键名 "localPlaylist" 下，并在用户重新加载我们网站上的页面时重新填充播放列表。

谁能帮帮我们？提前致谢！

Answer 1

我通过一个非常简单的改动就搞定了。我更改了在文档加载时设置新 jPlayer 的代码。这是从 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
  });
});

如您所见，我们只是添加了以下代码来代替预定义的播放列表项：

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

现在播放列表正在从用户的本地存储中填充！

所以，总结给那些正在尝试同样事情的人--

要将播放列表保存到本地存储：

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

要从本地存储加载播放列表：

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

正在使用 localStorage 播放列表创建新的 jPlayer 实例：

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

编码愉快！ :)

如何在页面加载时从 localStorage 加载 jPlayer 播放列表？

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

javascript

playlist

local-storage

jplayer