Question

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

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

我现在设置的方式是，点击每个项目下的添加到播放列表按钮后，该项目将添加到播放列表中，并存储在“localPlaylist”键下的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！

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

将播放列表保存到localStorage：

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

从localStorage加载播放列表：

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播放列表？

1 个答案: