从 WebStorage 获取一组的所有项目答案

【问题标题】：Getting all items of one group from WebStorage从 WebStorage 获取一组的所有项目
【发布时间】：2016-10-23 21:38:03
【问题描述】：

我想使用 WebStorage 在我的网站上实现简单的购物车系统。项目是具有 format 和 amount 值的图片。有一个计数器值包含当前存储中可用的项目数，每个新项目都以这种格式添加到 WebStorage：

item<id> = 1:3,5

现在我在列出存储中的项目时遇到了问题。例如，如果用户购买了 5 件商品并删除了 item0 和 item3 (item -= 2)，即使我检查存储中是否存在元素，我也无法通过简单的 for 循环获取所有值：

var len = parseInt(localStorage.getItem("items"));
for (let i = 0; i < len; i++) {
    if (localStorage.getItem("item" + i)) {
        // show element on the page
    }
}

Len 将是三岁，但我仍将拥有不会显示的 item5。

我应该创建新的项目 ID 数组并在项目从页面中删除时删除 ID，还是有更好的方法来处理这个问题？

【问题讨论】：

标签： javascript local-storage web-storage

【解决方案1】：

最好使用 JSON 对象来处理您的所有内容。

你的代码看起来像这样来设置数据：

// initial data
var cartData = {
    items: ['item1', 'item2', 'item3']
};

// stringify your object so it can be saved into localStorage
localStorage.setItem('cart', JSON.stringify(cartData));

然后您可以轻松删除/循环遍历项目：

// get cart
var cartData = JSON.parse( localStorage.getItem('cart') );

// delete 2nd item
cartData.items.splice(1, 1);

// loop through items
for(var i = 0, l = cartData.items.length; i < l; i++) {
    // do something with cartData.items[i]
}

【讨论】：