LocalStorage 更新元素导致与 JQuery 中的 JSON 重复

Question

因此，我尝试使用 JSON 更新 LocalStorage 中的元素，但我无法弄清楚我做错了什么。我想添加一个产品，并在再次添加相同产品时更新其数量。第一次添加 X 产品时，我得到了一个元素的正确数量。添加另一个 X 后，数量将变为空。添加全新的产品 Y 将导致多个重复的 Y 元素且数量全部为空。一定有一些逻辑错误，我似乎无法弄清楚。我怀疑 addToCart 函数出了问题。由于我是 JavaScript 和 JQuery 的新手，因此非常感谢任何帮助。谢谢。$(document).ready(function() {  // caching  let $table = $(".shoe-table");  fetch("shoes.json")    .then(resp => resp.json())    .then(data => {      let shoes = data.shoes;      let rows = [1, 2, 3];      let shoeCard = "";      let products = JSON.parse(localStorage.products || "[]");      console.log(products);      function addToCart(cBtn) {        let clickedButton = $(cBtn);        let buttonID = clickedButton.attr("id");        let thisInput = $("#" + clickedButton.attr("id") + ".input-form").children("input");        let newShoe = {          id: buttonID,          image: shoes[buttonID].image,          name: shoes[buttonID].name,          price: shoes[buttonID].price,          quantity: parseInt(thisInput.val())        };        if (products.length != 0) {          products.forEach(shoe => {            if (shoe.name == newShoe.name) {              shoe.quantity += newShoe.quantity;              localStorage.setItem("products", JSON.stringify(products));              console.log(products);            } else {              products.push(newShoe);              localStorage.setItem("products", JSON.stringify(products));            }          });        } else {          products.push(newShoe);          localStorage.setItem("products", JSON.stringify(products));        }      }

Answer 1

使用以下代码更改localStorage代码。问题是您将每次forEach迭代中的所有产品推送到本地存储。

尝试下面的代码。

if (products.length != 0) {

  let isExists = products.some(shoe => shoe.name === newShoe.name);

  if (!isExists) {

    products.push(newShoe);

  } else {

      products = products.map(shoe => {

      if (shoe.name == newShoe.name && !isNaN(newShoe.quantity)) {

        shoe.quantity += newShoe.quantity;

        return shoe;

      }

      return shoe;

    });

  }

  localStorage.setItem("products", JSON.stringify(products));

} else {

  products.push(newShoe);

  localStorage.setItem("products", JSON.stringify(products));

}

Answer 2

    if (products.length != 0) {

      for (let index = 0; index < products.length; index++) {

        if (products[index].name == newShoe.name) {

          products[index].quantity += newShoe.quantity;

          localStorage.setItem("products", JSON.stringify(products));    

          break;

        } else{

          products.push(newShoe);

          localStorage.setItem("products", JSON.stringify(products));  

          break;

        }

      }

    } else {

      products.push(newShoe);

      localStorage.setItem("products", JSON.stringify(products));

    }

这解决了重复问题，但在添加现有产品时仍然存在数量为空的问题。