从WebStorage获取一个组的所有项目

时间:2016-10-23 13:15:57

标签: javascript local-storage web-storage

我想使用WebStorage在我的网站上实现简单的购物车系统。项目是具有格式金额值的图片。有一个计数器值,其中包含此时存储中可用的项目数,并且每个新项目都以这种格式添加到WebStorage中:

item<id> = 1:3,5

现在我在存储中列出项目时遇到问题。例如,如果用户购买了5个商品并移除item0item3item -= 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,或者有更好的方法来解决此问题?

1 个答案:

答案 0 :(得分: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]
}