Question

我有几个localStorage键，例如Cart，Viewed和Trash。

问题有两个：

1）我如何以最高性能的方式循环遍历localStorage中的项ID，如果ID已经存在，则将类或数据属性添加到匹配的DOM元素。

2）从3 localStorage Keys（Trash，Cart，Viewed）创建最后20个项目的单个列表的最佳方法是什么？从性能的角度来看，最好是在与我的问题的pt1相同的循环函数中执行此操作（即，还测试是否存在ID并添加一个类，如果为true）？

这就是我所拥有的：

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），并存储在相关密钥中。

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']);

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

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

然后更改状态并使表示状态值的对象无效。我不确定你要完成什么，但也许被查看的项目移动到一个低于折叠的div，垃圾和购物车项目移动到repsective隐藏的divs和相应的图标更新与适当的计数等...

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

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

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

1 个答案: