使用 HTML5 localStorage 和 jQuery 添加到收藏夹/书签 [英] Add to favorites/bookmark using HTML5 localStorage and jQuery
问题描述
我想在我的一个项目中添加添加到收藏夹/书签"功能,但我对此完全空白.
I want to add 'add to favorites/bookmark' feature in one of my projects, but am totally blank regarding the same.
基本上,如果用户想从收藏夹中添加/删除,我使用引导程序字形供用户选择.我做了一些研究,发现 html5 localStorage 概念很合适,但无法真正弄清楚它对我的项目的确切作用.如果这里有人可以指导我,那将是一个很大的帮助.
Basically, I'm using bootstrap glyphicons for user to select it if he wants add/remove from favorites. I did some research and found html5 localStorage concept suitable but can't really figure out its exact working for my project. It would be a great help if anyone here can guide me on it.
这是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>
因为我不太了解jquery中localStorage的实现,所以没有添加,不过js文件暂时是这样的:
since I don't really know the implementation of localStorage in jQuery, haven't added it, yet this is what js file has for now:
$(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合适.
i did search over it and found this stack overflow answer appropriate.
我需要什么?
- 当用户点击 glyphicon-star-empty 时,它应该切换到 glyphicon-star 并且相关项目应该被添加到 localStorage(即收藏夹).
- 当用户点击您已选择:"按钮时,它应该删除表格中的当前内容并仅显示收藏的项目(在同一页面上),并提供取消收藏的选项.
这是我正在做的fiddle.
推荐答案
尝试创建一个 JavaScript 对象并将其序列化以将其保存在 localStorage 中.使用这样的东西 -
Try creating a JavaScript object and serialize it to save it in localStorage. Use something like this -
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
};
};
这篇关于使用 HTML5 localStorage 和 jQuery 添加到收藏夹/书签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!