localstorage javascript中的影响更改

这是当用户单击“添加到购物车”按钮时将产品添加到购物车的代码

 addToCart(){
      var cart = []
      var cartObj = {}

      var cartItem = { 'item': this.product, 'price':this.product.price, 'qty': 0 }
      cartObj[this.product.id] = cartItem

      if(!localStorage.getItem('cart')){
        localStorage.setItem('cart', JSON.stringify(cart))
      }

      cart = JSON.parse(localStorage.getItem('cart'));

      if(cart.length > 0){
        if(cart.hasOwnProperty(this.product.id)){
          cartObj = cart[this.product.id]
        }
      }

      cartObj[this.product.id]['qty']++
      cartObj[this.product.id]['price'] = this.product.price * cartObj[this.product.id]['qty']
      cart.push(cartObj);
      localStorage.setItem('cart', JSON.stringify(cart));
      console.log('added')
    }
  }

我想要这样的东西，比如说用户在同一个产品上点击3次

['product_id': { 'item': this.product, 'price':this.product.price, 'qty': 3 }] 

但是javascript却在这样做

[
'product_id': { 'item': this.product, 'price':this.product.price, 'qty': 1 },
'product_id': { 'item': this.product, 'price':this.product.price, 'qty': 1 },
'product_id': { 'item': this.product, 'price':this.product.price, 'qty': 1 }
] 

---

请帮助

您将获得三份副本，因为每次用户单击时，您都将推送到购物车阵列

如果您想避免这种情况，您必须检查它是否已经在购物车数组中，最好是检查id

---

试试这个，它会解决问题的

addToCart(){
      var cart = []
      var cartObj = {}

      var cartItem = { 'item': this.product, 'price':this.product.price, 'qty': 0 }
      cartObj[this.product.id] = cartItem

      if(!localStorage.getItem('cart')){
        localStorage.setItem('cart', JSON.stringify(cart))
      }

      cart = JSON.parse(localStorage.getItem('cart'));

//---------> this check condition needs to be fixed      
      // if(cart.length > 0){
      //  if(cart.hasOwnProperty(this.product.id)){
      //    cartObj = cart[this.product.id]
      //  }
      // }
      let itemIndex = cart.findIndex((val)=>val.hasOwnProperty(this.product.id));
      if(cart[itemIndex]) {
         cartObj=cart[itemIndex];
      } else {
        cart.push(cartObj);
      }

      cartObj[this.product.id]['qty']++
      cartObj[this.product.id]['price'] = this.product.price * cartObj[this.product.id]['qty']
      // cart.push(cartObj);
      localStorage.setItem('cart', JSON.stringify(cart));
      console.log('added')
    }

---

可能需要将数量变量转换为int。。。在开始cartObj[this.product.id]['qty']++之前，您可以更新如何设置this.product吗？

addToCart(){
      var cart = []
      var cartObj = {}

      var cartItem = { 'item': this.product, 'price':this.product.price, 'qty': 0 }
      cartObj[this.product.id] = cartItem

      if(!localStorage.getItem('cart')){
        localStorage.setItem('cart', JSON.stringify(cart))
      }

      cart = JSON.parse(localStorage.getItem('cart'));

//---------> this check condition needs to be fixed      
      // if(cart.length > 0){
      //  if(cart.hasOwnProperty(this.product.id)){
      //    cartObj = cart[this.product.id]
      //  }
      // }
      let itemIndex = cart.findIndex((val)=>val.hasOwnProperty(this.product.id));
      if(cart[itemIndex]) {
         cartObj=cart[itemIndex];
      } else {
        cart.push(cartObj);
      }

      cartObj[this.product.id]['qty']++
      cartObj[this.product.id]['price'] = this.product.price * cartObj[this.product.id]['qty']
      // cart.push(cartObj);
      localStorage.setItem('cart', JSON.stringify(cart));
      console.log('added')
    }