如何在localStorage中更改和存储购物车数量值

Question

我在网站上有一个购物车页面，该页面基于JSON产品列表和添加的购物车项目的JSON列表加载项目列表，该列表已加载并存储在localStorage中。我并未包含所有代码以免使问题超载。

问题是-由于某种原因，只有最后一项实际上保存了更改后的quantity值。如果购物车中有2件物品，并且我更改了第一个物品-刷新后它将变为quantity = 1，并且quantity会跳至下一个物品。

let cart;

if (localStorage.getItem('cart') === null) {
    cart = [];
} else {
    cart = JSON.parse(localStorage.getItem('cart'));
}

function loadCart() {
    const request = new XMLHttpRequest();
    request.open('get', 'data/products.json');
    request.onload = () => {
        try {
            const json = JSON.parse(request.responseText);
            populateCart(json);

        } catch (e) {
            console.warn('Could not load products');
        }
    }

    request.send();
}

function populateCart(json) {
    let cartExists = false;
    cartSection.innerHTML = "";
    buttonsContainer.innerHTML = "";

    json.forEach((row) => {
        if (cart.filter(e => e.product_ID === row.product_ID).length > 0) {
            cartExists = true;

            objIndex = cart.findIndex((e => e.product_ID === row.product_ID));

            <...>

            const input = document.createElement('input');
            input.type = 'number';
            input.value = cart[objIndex].quantity;
            input.id = row.product_ID;
            input.inputmode = 'numeric';
            input.min = '1';
            input.max = '100';
            input.oninput = function () {
                if (parseInt(this.value) > parseInt(this.max)) {
                    this.value = this.max;
                }
                else if (parseInt(this.value) < parseInt(this.min)) {
                    this.value = this.min;
                }
                else if (this.value === "") { this.value = this.min; }

                cart[objIndex].quantity = this.value;
                localStorage.setItem('cart', JSON.stringify(cart));
            };

            <...>

        }
    });

<...>

}

Answer 1

问题出在objIndex及其在input.oninput事件处理程序中的使用：

该变量在循环中得到更新，并且当发生输入更改事件时，它将始终指向购物车的最后一个元素。一种解决方案是在循环内创建一个对象，该对象持有对当前objIndex值的引用，并在输入方法中使用此对象：

...
input.max = '100';

// create an object containing the current ID
let product = {};
product.id = objIndex;
input.oninput = function() {
  if (parseInt(this.value) > parseInt(this.max)) {
    this.value = this.max;
  } else if (parseInt(this.value) < parseInt(this.min)) {
    this.value = this.min;
  } else if (this.value === "") {
    this.value = this.min;
  }

  // access the stored ID in the event handler:
  cart[product.id].quantity = parseInt(this.value);
}