JavaScript实现购物车首次点击加购按钮添加多个商品问题排查

问题根因 #

• setItems 函数逻辑存在缺陷：当商品已存在于购物车时，没有累加购买数量，反而用全局定义的初始inCart=0的商品对象覆盖了本地存储中已有的数据，导致数量统计混乱。
• 页面初始化时没有同步本地存储中已有的购物车数据到全局products数组，每次刷新后全局商品的购买数量都会重置为0，和本地存储数据不一致。
• 购物车总数量统计和单个商品的购买数量统计完全脱节，本地存储中残留的历史异常总数量会在首次点击时直接累加，出现一次性加购上百件的问题。
• 定义的初始化加载购物车数量的onLoadCartNumbers函数没有被调用，页面加载时无法正确展示已有的购物车数量。

修复后的完整代码 #

初始化逻辑补充 #

首先新增页面初始化逻辑，同步本地存储的购物车数据到全局变量：

// 原有基础定义代码不变
let carts = document.querySelectorAll(".add-cart");

let products = [
    {
        "name":"ESSENZA MINI D PLUS",
        "tag": "primera",
        "price": 24765.08,
        "inCart": 0
    },
    {
        "name":"PIXIE-NESPRESSO",
        "tag": "segunda",
        "price": 19004.32,
        "inCart": 0
    },
    {
        "name":"GRAN LATTISIMA",
        "tag": "tercera",
        "price": 23098.56,
        "inCart": 0
    },
    {
        "name":"ESSENZA MINI C",
        "tag": "cuarta",
        "price": 30983.09,
        "inCart": 0
    }
]

// 新增：页面加载时初始化购物车数据
initCart()
function initCart() {
    // 同步本地存储已有的商品购买数量到全局products数组
    let cartItems = localStorage.getItem("productsInCart")
    if (cartItems) {
        cartItems = JSON.parse(cartItems)
        products.forEach(item => {
            if (cartItems[item.tag]) {
                item.inCart = cartItems[item.tag].inCart
            }
        })
    }
    // 加载展示购物车总数量
    onLoadCartNumbers()
}

// 原有事件绑定代码不变
for (let i=0; i < carts.length; i++) {
    carts[i].addEventListener("click", () => {
        cartNumbers(products[i]);
        totalCost(products[i]);
    });
}

修复cartNumbers相关函数 #

function onLoadCartNumbers(){
    let productNumbers = localStorage.getItem("cartNumbers");
    if(productNumbers){
        document.querySelector(".carrito a span").textContent = productNumbers;
    } else {
        document.querySelector(".carrito a span").textContent = 0;
    }
}

function cartNumbers(product){
    let productNumbers = localStorage.getItem("cartNumbers");
    productNumbers = productNumbers ? parseInt(productNumbers) : 0;
    const newCount = productNumbers + 1
    localStorage.setItem("cartNumbers", newCount);
    document.querySelector(".carrito a span").textContent = newCount;
    setItems(product);
}

修复setItems函数 #

function setItems(product) {
    let cartItems = localStorage.getItem("productsInCart");
    cartItems = cartItems ? JSON.parse(cartItems) : {};

    if(cartItems[product.tag]) {
        // 商品已存在，购买数量累加1
        cartItems[product.tag].inCart += 1
    } else {
        // 商品不存在，新增到购物车，数量设为1
        product.inCart = 1
        cartItems[product.tag] = product
    }
    // 同步更新全局products数组的数量，保持数据一致
    const globalProduct = products.find(item => item.tag === product.tag)
    if (globalProduct) {
        globalProduct.inCart = cartItems[product.tag].inCart
    }
    localStorage.setItem("productsInCart", JSON.stringify(cartItems));
}

注意：如果你的totalCost总价计算函数也使用了类似的独立存储逻辑，建议同步修改为从已存储的productsInCart遍历计算总价，避免出现金额和数量不匹配的问题。

内容的提问来源于stack exchange，提问作者Cecilia