Question

我在更改本地存储中的数据时遇到问题。我在做购物车，我有很多产品。在产品页面上单击“添加到购物车”后，数据将检查localstorage是否已经有此产品，因此，如果为true，则产品未添加该产品，只是更改了计数状态。一切正常，直到我添加另一种产品的那一刻。此后，当我要添加已经在本地存储中的产品时，它必须更改计数状态，但是它又增加了一次此产品的时间。为什么？你能帮我吗？

0: {titleProduct: "first", productPrice: "15", count: 2}
1: {titleProduct: "second"", productPrice: "9", count: 3}
2: {titleProduct: "first", productPrice: "15", count: "1"}

但它应该看起来像这样

0: {titleProduct: "first", productPrice: "15", count: 3}
1: {titleProduct: "second"", productPrice: "9", count: 3}

代码：

  const rawData = localStorage.getItem("cart") || "[]";
const data = JSON.parse(rawData);
var setData;

data.filter(titleNow => {
  if (titleNow.titleProduct == titleProduct) {
  setData = true;
  }
  else {
    setData = false;
  }
});


  if (setData) {
   data.filter(item => {
    item.titleProduct == titleProduct ? item.count = parseInt(item.count)+Number(dataCart.innerHTML) : "";
})
  } else {


    data.push({titleProduct, productPrice, count: dataCart.innerHTML});
   

  }

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

Answer 1

filter不是在此处使用的正确功能。使用.find()或.findIndex()

您的代码中的问题是根据最终产品的标题是否等于setData来设置titleProduct变量。如果是，setData将被设置为true，否则将为false。因此，如果您尝试添加标题为second的第三种产品，那么您的代码就可以使用。

const product = data.find(prod => prod.titleProduct === titleProduct);

if (prod) {
   prod.count++;
} else {
   data.push({titleProduct, productPrice, count: dataCart.innerHTML});
}

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

Answer 2

您可以尝试使用

const updatedCart = data.map(item => {
    if(titleProduct === item.titleProduct){
        return {
            ...item,
            count: dataCart.innerHTML
        }
    }
    else{
        return item
    }
})

localStorage.setItem("cart", JSON.stringify(updatedCart));

如果titleProduct与iteratee一致，则对数据进行迭代并更改dataCart.innerHTML的计数

更改本地存储中的状态

2 个答案: