添加到收藏夾使用HTML5的localStorage和jQuery

Question

我要添加「添加到收藏夾/書籤」功能在我的項目之一，但我完全空白的關於同一/書籤。

基本上，我使用的是引導glyphicons用戶，如果他想要添加/從收藏列表中刪除，將其選中。我做了一些研究，發現html5 localStorage概念是合適的，但無法真正弄清楚它對我的項目的確切工作。如果有人能在這裏指導我，那將是一個很大的幫助。

這裏的HTML：

<h1>test</h1> 
<table class="'basic"> 

    <tr> 
     <td><div class="glyphicon glyphicon-star-empty icon bkmark_icon"> </div></td> 
     <td>A</td> 
    </tr> 
    <tr> 
     <td><div class="glyphicon glyphicon-star-empty icon bkmark_icon"> </div></td> 
     <td>B</td> 
    </tr> 
    <tr> 
     <td><div class="glyphicon glyphicon-star-empty icon bkmark_icon"> </div></td> 
     <td>C</td> 
    </tr> 
</table> 

<br><button class="btn">You have selected:</button> 

，因爲我真的不知道的localStorage的jQuery的實施，還沒有添加它，然而，這是什麼樣的js文件有現在：

$(function() { 

    $(document).on('click', '.bkmark_icon', function(){ 

     $(this).toggleClass('glyphicon-star-empty glyphicon-star'); 
    // localStorage.setItem('display', $(this).is(':visible')); 

    }); 

    $(document).on('click', '.btn', function(){ 
     var bkmark_item = '<table><tr><td><div class="glyphicon glyphicon-star icon bkmark_icon"></div></td><td>*selected*</td></tr></table>'; 
     $(bkmark_item).insertAfter('h1'); 

    }); 

}); 

我沒有搜索過它，發現這個堆棧溢出answer合適。

我需要什麼？

1. 當用戶點擊glyphicon-star-empty時，它應該切換到glyphicon-star，並將相關項目添加到localStorage（即收藏夾）。
2. 當用戶點擊「您已選擇：」按鈕，就應該刪除當前內容是在表中，僅顯示收藏項目（在同一頁上）與一個選項，以取消喜愛它。

這裏的fiddle我正在努力。

Answer 1

下面是關於如何使用本地存儲的一個小例子：

// Store 
localStorage.setItem("lastname", "Smith"); 
// Retrieve 
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); 

您可以參考this page更多的例子。 使用它非常簡單，它像任何JS對象一樣工作。

編輯： 本地存儲here的功能還有更多的擴展示例。

Answer 2

嘗試創建一個JavaScript對象和序列化將其保存在localStorage的。使用這樣的事情 -

var bookmarkedItems = []; 
function ItemObject(name, content) 
{ 
    this.name = name; 
    this.content = content; 
} 

function addItem() 
{ 
    bookmarkedItems.push(new ItemObject('Item1', 'Content1')); 
} 

function saveToLocalStorage(item) 
{ 
    var ob = localStorage.get('KEY'); 
    if(ob) 
    { 
    bookmarkedItems = JSON.parse(ob); 
    } 
    bookmarkedItems.push(item); 
    localStorage.set('KEY', JSON.stringify(bookmarkedItems); 
} 

OR

請參閱下面的代碼 -

var storageService = function() { 

     var STORAGE_KEY = "bookmarkitems"; 
     var bookmarkitems = {}; 

     var init = function() { 
      bookmarkitems = sessionStorage.getItem(STORAGE_KEY); 
      if (bookmarkitems) { 
       bookmarkitems = JSON.parse(bookmarkitems); 
      } 
      else { 
       bookmarkitems = {}; 
      } 
     }; 

     var set = function (key, value) { 
      bookmarkitems[key] = value; 
      updateStorage(); 

     }; 

     var get = function (key) { 
      return bookmarkitems[key]; 
     }; 

     var updateStorage = function() { 
      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(bookmarkitems)); 
     }; 

     return { 
      init: init, 
      set: set, 
      get: get, 
      updateStorage: updateStorage 
     }; 
    };