LocalStorage，循环匹配 ID，从 DOM 中删除

Question

我有几个 localStorage 键，例如购物车、已查看和垃圾箱。

问题有两个：

1）如何以最高效的方式循环 localStorage 中的项目 ID，如果 ID 已存在，则向匹配的 DOM 元素添加类或数据属性。

2) 从 3 个 localStorage Keys（垃圾箱、购物车、已查看）创建最后 20 个项目的单独列表的最佳方法是什么？从性能角度来看，最好在与我的问题的 pt1 相同的 Loop 函数中执行此操作（即还测试 ID 是否存在，如果为真则添加一个类）？

这就是我所拥有的：

HTML

标题

// 部分 // 页脚 trash;

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... .//..."}]

如有任何帮助，我们将不胜感激。

新年快乐！

干杯 本

Answer 1

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

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

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

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

，然后更改状态并使表示状态值的对象无效。我不确定您要实现什么目标，但也许查看的项目将自身移动到低于折叠、垃圾和购物车项目将自身移动到各自的隐藏 div，并且各自的图标会更新为适当的计数等...

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

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