LocalStorage,遍历匹配的 ID,从 DOM 中删除

Posted

技术标签:

【中文标题】LocalStorage,遍历匹配的 ID,从 DOM 中删除【英文标题】:LocalStorage, Looping through matched ID's, removing from the DOM 【发布时间】:2012-01-31 03:28:46 【问题描述】:

我有几个 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"(key)和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....//..."]

我们将不胜感激。

新年快乐!

干杯 本

【问题讨论】:

【参考方案1】:

将单个对象存储在一个键中。然后在对象解析后对其进行处理。

var mysite = $.parseJSON(localStorage['mysite']);

您可以将所有状态存储在 ids 向量数组中(例如


    cart:[idA,idB],
    viewed:[idZ,idX],
    trashed:[id1,id2]

然后更改状态并使表示状态值的对象无效。我不确定您要完成什么,但可能查看的项目将自己移动到首屏下方的 div,垃圾箱和购物车项目将自己移动到相应的隐藏 div,并且相应的图标会使用适当的计数进行更新,等等...

如果这些项目存储在您的数据库中,但不是在每个页面上生成,您可以通过 ajax 请求给定 ID 的项目数据,并在需要时从检索到的对象生成您的状态。

也许您希望所有这些数据都存储在本地,因为它没有存储在某个地方的数据库中,更多信息可能会有所帮助。

【讨论】:

以上是关于LocalStorage,遍历匹配的 ID,从 DOM 中删除的主要内容,如果未能解决你的问题,请参考以下文章

jQuery遍历not的用法

如何遍历对象数组以查找 ID 然后返回兄弟键

无法从 localStorage 检索动态生成的内容

实现下拉菜单的宽度与登录人ID长度的匹配

我无法获取 localStorage 数据,我正在使用 useEffect Hook

一段时间后如何从localStorage中删除一些东西? [复制]