Question

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

这是我将产品添加到购物车的方式：

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

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

当我添加相同的产品ID时，它正在复制它。

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

我只想增加quantity，例如：

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

每种方法都尝试了很少的方法：（

请帮忙吗？

Answer 1

您每次都替换，除非您的函数中没有真正的var basket = []，否则不会出现您描述的问题。但是，您所描述的问题可能是由于不检查具有产品ID的现有条目引起的。

相反：

将阵列保留在内存中，而不仅仅是本地存储
在页面加载时从本地存储加载它
更改内存副本时在本地存储中更新
用户完成购买或清除购物篮后，将其从本地存储中删除

对于＃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 +功能将使其更加简洁。

Answer 2

首先，您需要尝试从localStorage中读取篮子，而不是每次都从一个空数组开始。其次，建议您使用对象而不是数组。您的产品已经具有id，因此不必每次都搜索数组，只需让该语言为您进行键查找即可。最后，您缺少有关如何更新购物车中现有项目的任何处理方法。这是我的解决方法，既支持向购物车添加新商品，又支持增加现有商品的数量。

function addToCart(id, qty){    
    var basket = JSON.parse(localStorage.getItem('basket')) || {};
    if (basket[id]) {
      basket[id] += qty;
    } else {
      basket[id] = qty;
    }
    localStorage.setItem('basket', JSON.stringify(basket));
    console.log(basket);
}

addToCart(1,1);
addToCart(2,1);
addToCart(1,1);
addToCart(3,2);
addToCart(3,1);

// results in:
VM222:9 {1: 1}
VM222:9 {1: 1, 2: 1}
VM222:9 {1: 2, 2: 1}
VM222:9 {1: 2, 2: 1, 3: 2}
VM222:9 {1: 2, 2: 1, 3: 3}

Answer 3

解决方案：

function addToCart(id, qty) {
    var newItem = true;
    var basket = json.parse(localStorage.getItem('basket'));
    basket.forEach(function (item){
        if(item.product_id == id) {
            item.quantity += qty;
            newItem = false;
        }
    })
    if(newItem) {
        basket.push({
           product_id: id,
           quantity: qty
        });
        localStorage.setItem('basket', JSON.stringify(basket));
    }
}

Answer 4

尝试

function addToCart(id, qty){    
   var basket = JSON.parse(localStorage.getItem('basket'));
   var isExists = false;
    if(basket === null || basket === undefined){
     basket = [];
   }

    basket.reduce(function(o,i){
       if(i.product_id === id){
          i.quantity += qty;isExists = true;
        }
        o.push(i);
       return o;
    },[]);
    if(!isExists){


    basket.push({
        product_id: id,
        quantity: qty
    });}
    localStorage.setItem('basket', JSON.stringify(basket));
}

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

4 个答案: