Javascript 使用HTML5 localStorage和jQuery添加到收藏夹/书签

我想在我的一个项目中添加“添加到收藏夹/书签”功能，但我对此完全空白

基本上，我使用引导图标让用户选择它，如果他想添加/删除收藏夹。我做了一些研究，发现html5本地存储的概念是合适的，但我无法真正理解它是否适合我的项目。如果这里有人能指导我的话，那将是一个很大的帮助

以下是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>

测试
A.
B
C

您已选择：

因为我不太了解jQuery中localStorage的实现，所以我还没有添加它，现在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');

   });

});

$（函数（）{
$（文档）.on（'单击'，'.bkmark_图标'，函数（））{
$（this.toggleClass（'glyphicon-star-empty glyphicon-star'）；
//setItem（'display'，$（this）.is（':visible'）；
});
$（文档）.on（'单击'，'.btn'，函数（）{
变量bkmark_项='*选定*'；
$（bkmark_项）。插入（'h1'）；
});
});

我搜索了一下，发现这个堆栈溢出是合适的

我需要什么

当用户单击glyphicon star empty时，它应切换到glyphicon star，相关项目应添加到本地存储（即收藏夹）

当用户单击“You have select:”按钮时，它应删除表中的当前内容，并仅显示喜爱的项目（在同一页面上），并提供取消喜爱该项目的选项

---

这是我正在处理的问题。

这是一个关于如何使用本地存储的小示例：

你可以参考更多的例子。 使用它非常简单，它与任何JS对象一样工作

编辑：

---

还有更多关于本地存储功能的扩展示例。

尝试创建一个JavaScript对象并将其序列化以将其保存在本地存储中。用这样的东西-

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

或

参考以下代码-

   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
        };
    };

---

获取数据怎么样？在页面加载时，检查本地存储是否存在，如果存在，则获取数据并初始化bookmarkeeditems数组。您能帮助解决这个问题吗？我已经放置了更多的示例，我将看看您的JSFIDLE示例

   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
        };
    };