我有几个localStorage
购物车、已查看和垃圾箱等键。
问题有两个:
1) 我如何以最高效的方式循环访问 localStorage 中的项目 ID,如果 ID 已存在,则将类或数据属性添加到匹配的 DOM 元素。
2) 从 3 个 localStorage Keys
创建最后 20 项的单独列表的最佳方法是什么? (垃圾箱、购物车、已查看)?从性能角度来看,最好在与我的问题的 pt1 相同的 Loop 函数中执行此操作(即还测试 ID 是否存在,如果为真则添加一个类)?
这就是我所拥有的:
HTML
<article data-id="548" data-date="Mon Dec 19 09:12:57">
<h1><a href="#">Title</a></h1> // section // footer <a href="#" data-context="trash">trash</a>
</article>
jQuery
$tools.on("click", "a", function(e){
var storeId = $(this).attr('data-context');
var selector = $(this).closest('article');
var dataId = selector.attr('data-id');
var pubDate = selector.attr('data-date');
var postUrl = selector.find('a', 'h1').attr('href');
var postTitle = selector.find('h1').text();
var $removable = $container.find( selector );
setLocalStorage(storeId, dataId, postUrl, postTitle, pubDate);
if (storeId == "Trash") {
$container.isotope( 'remove', $removable );
};
e.preventDefault();
});
Setter 函数。
变量被传递,例如 data-context="Trash"
(关键)和 data-id="001"
(id)并存储在相关Key中。
function setLocalStorage(itemKey, dataId, postUrl, postTitle, postPub) {
var ItemKey = itemKey;
var timeStamp = new Date();
var json = JSON.parse(localStorage.getItem(ItemKey));
if(json == null)
json = [];
json.push({id:dataId,title:postTitle,url:postUrl,postPub:postPub,dataTimeStamp:timeStamp});
// save the result array
sessionStorage.setItem(ItemKey, JSON.stringify(json))
// Notify user item added to Cart
updateNotifications(ItemKey, json);
}
localStorage 最终是这样的:Trash [{"id":"418","title":"\n\t\t\t\t\t\t\t\t\tPost Title....//..."}]
如果您能提供任何帮助,我们将不胜感激。
新年快乐!
干杯 本
最佳答案
将单个对象存储在键中。然后在解析对象后对其进行处理。
var mysite = $.parseJSON(localStorage['mysite']);
您可以将所有状态存储在 ids 向量数组中(例如
{
cart:[idA,idB],
viewed:[idZ,idX],
trashed:[id1,id2]
}
然后更改状态并使表示状态值的对象无效。我不确定你想要完成什么,但也许查看的项目将自己移动到折叠下方的 div,垃圾和购物车项目将自己移动到各自的隐藏 div,并且相应的图标会更新为适当的计数,等等...
如果这些项目存储在您的数据库中,但不是在每个页面上生成,您可以使用 ajax 请求给定 ID 的项目数据,并在需要时从检索到的对象生成状态。
也许您希望所有这些数据都存储在本地,因为它没有存储在数据库中的某个地方,更多信息可能会有所帮助。
关于jquery - LocalStorage,循环匹配的 ID,从 DOM 中删除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8689435/