Question

我有一个产品列表，我将其存储在LocalStorage中。我的LocalStroage看起来像这样：

{
"2":{"id":"2","colour":"Black","size":"S","quantity":"1"},
"3":{"id":"3","colour":"Blue","size":"Universal","quantity":"1"},
}

我想在我的UI中显示“ 2”（因为我的LocalStorage中有两个项目）。到目前为止，我尝试过的是：

 var temp = JSON.parse(localStorage["productTable"]);
        for(var i in temp) {
            totalitems ++;
        }
        itemsincart.innerHTML = '<i class=\"ion-android-cart\"></i><span id=\"cart-total\">'+totalitems+'</span>';

在这种情况下，我得到totalitems作为id的总和，我知道这是错误的。

尝试了这个Localstorage: Count how many values in key when using stringify，每次我都得到'1'。

任何人都可以帮助我弄清楚如何显示LocalStorage中的项目数吗？

Answer 1

您不需要使用循环Object.keys(temp).length来获取json对象的长度，如以下代码段所示：

var temp = {
"2":{"id":"2","colour":"Black","size":"S","quantity":"1"},
"3":{"id":"3","colour":"Blue","size":"Universal","quantity":"1"},
};
console.log(Object.keys(temp).length+" items in cart");

在您的情况下，请尝试以下操作：

var temp = JSON.parse(localStorage["productTable"]);
itemsincart.innerHTML = '<i class=\"ion-android-cart\"></i><span id=\"cart-total\">'+Object.keys(temp).length+'</span>';

Answer 2

尝试一下

var totalitems = JSON.parse(localStorage["productTable"]).length; 
itemsincart.innerHTML = '<i class=\"ion-android-cart\"></i><span id=\"cart-total\">'+totalitems+'</span>';

Answer 3

我最近搜索了一个解决方案，发现最简单的方法就是创建另一个localStorage项（cartQty）。

因此，每次将产品添加到购物车时，都要增加购物车数量。

$('button').on('click',function() {
  //...
  ++i;
  window.localStorage.setItem('cartQty', i);
  // display your cart quantity
  $('span#total').text(window.localStorage.getItem('cartQty');
}

没有意识到问题是针对AngularJS的，但您明白了

LocalStroage：计算本地存储中的项目数，并使用AngularJS在UI中显示它

3 个答案: