javascript - 通过现有键更新 localStorage 数组中的值

Question

我正在创建一个 JavaScript 购物车。

以下是将产品添加到购物车的方法:

function addToCart(id, qty){    
    var basket = []
    basket.push({
        product_id: id,
        quantity: qty
    });
    localStorage.setItem('basket', JSON.stringify(basket));
}

现在，如果 id 已经存在，我只尝试从 localStorage 更新当前的 basket

当我添加相同的产品 ID 时，它会重复。

[{"product_id":"10", "quantity":"1"}, {"product_id":"10", "quantity":"1"}]

我只想增加数量，例如:

[{"product_id":"10", "quantity":"2"}]

尝试了几种方法，但没有成功:(

请问有什么帮助吗？

Answer 1

您每次都替换存储的数组，这不会出现您所描述的问题，除非您确实没有varbasket = [] 在你的函数中。但您所描述的问题可能是由于未检查具有产品 ID 的现有条目而导致的。

相反:

1. 将数组保存在内存中，而不仅仅是本地存储
2. 在页面加载时从本地存储加载
3. 更改内存副本时在本地存储中更新它
4. 当用户完成购买或清空购物篮时将其从本地存储中删除

对于 #1 和 #2:在代码全局的位置(但理想情况下不是真正的全局):

var basket = JSON.parse(localStorage.getItem("basket")) || [];

对于#3:

function rememberBasket() {
    localStorage.setItem('basket', JSON.stringify(basket));
}
function addToCart(id, qty){
    // See if product exists
    var entry = basket.find(function(e) { return e.product_id == id; });
    if (entry) {
        entry.quantity += qty; // Or just `= qty` to replace rather than adding
    } else {
        basket.push({
            product_id: id,
            quantity: qty
        });
    }
    rememberBasket();
}

对于#4，当然:

basket = [];
rememberBasket();

<小时/>

你的原始代码都是 ES5 及更早版本，所以我坚持上面的代码，但 ES2015+ 功能会让它更加简洁。