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

&nbsp; &nbsp; if (products.length != 0) {&nbsp; &nbsp; &nbsp; for (let index = 0; index < products.length; index++) {&nbsp; &nbsp; &nbsp; &nbsp; if (products[index].name == newShoe.name) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; products[index].quantity += newShoe.quantity;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; localStorage.setItem("products", JSON.stringify(products));&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; } else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; products.push(newShoe);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; localStorage.setItem("products", JSON.stringify(products));&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; products.push(newShoe);&nbsp; &nbsp; &nbsp; localStorage.setItem("products", JSON.stringify(products));&nbsp; &nbsp; }这解决了重复问题，但在添加现有产品时仍然存在数量为空的问题。