javascript - 如果项目已存在，如何更新 localStorage 中的数组对象

Question

想知道当项目已存在时如何更新 localStorage 中的数组 obj，我的 localStorage 在刷新后创建一个新数组，而不是更新或添加新的 obj。

本地存储对象--

cart - [{"Product":"Coke","Price":"1.99","Quantity":"1x "}]

addToCart 函数，我将对象推送到 array[]

var itemStorage = [];
for (var key in drinkCounter) {
...

        var cartObj = { Product: key, Price: drinkCounter[key].price, Quantity: drinkCounter[key].count + 'x ' }
        itemStorage.push(cartObj);
        localStorage.setItem('cart', JSON.stringify(itemStorage));
...

    }

这是一个JSfiddle ，因此，一旦您添加了一项并刷新页面并添加相同或新的项，它就会重新创建 localStorage，我该如何更新它，而不是每次刷新页面时都重新创建一个新项？

编辑-- 如果您添加了相同的商品，它应该更新 {Quantity:}

根据下面的答案，我尝试更新现有商品的商品数量，但这不起作用。有什么建议吗？

cartItems.forEach(function (item, i) {
            if (item.Product == key) {
                item.Quantity = drinkCounter[key].count;
                // item.Quantity += 1; // or no avail
                index = i;
            }
        });

修复了本地存储数量

if (index !== -1) {
  cartItems[index].Quantity = parseInt(cartItems[index].Quantity) + 1 + 'x';
} else {
  var cartObj = { Product: key, Price: drinkCounter[key].price, Quantity: drinkCounter[key].count + 'x ' }
  cartItems.push(cartObj);
}

**编辑 -- ** 关于总价的简单问题，有人可以指出为什么当我添加商品时，totalPrice 是 0 而它应该是商品价格

Answer 1

您无法避免对 localStorage 数据进行字符串化。

var data = JSON.parse( localStorage.getItem('cart') );
for (var key in drinkCounter) {
...       

    // search for a product with current key
    var index = -1;
    data.forEach(function(item, i){
        if( item.Product === key ) {
            index = i;
        }
    });

    if (index !== -1) {
        // data[index] = cartObj;
        data[index].Quantity = parseInt(data[index].Quantity.split(x)[0]) + drinkCounter[key].count + 'x ';
    } else {
        var cartObj = { Product: key, Price: drinkCounter[key].price, Quantity: drinkCounter[key].count + 'x ' };
        data.push(cartObj);
    }
...
}

localStorage.setItem('cart', JSON.stringify(data));