如何在頁面加載時從localStorage加載jPlayer播放列表？

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

這一切都是偉大而美好的。但現在，當我訪問另一個頁面時，我如何回憶這些信息並使用本地存儲信息重新填充播放列表？

下面是在文件準備好上調用的代碼，它設置了新的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 
    }); 
}); 

快樂編碼！ :)