电商站点localStorage购物车商品存在更新数量不存在新增实现问题

首页原有逻辑的核心错误是用全量商品列表的索引直接匹配购物车数组的索引，二者的元素顺序没有任何关联，导致匹配逻辑完全错乱，才会出现第二次添加同款商品重复插入的问题。
详情页注释的循环逻辑顺序错误：在循环内遇到id不匹配的商品就直接执行插入，会导致购物车有多少个已有商品就重复插入多少次同款商品。

首页（index.html）修复版 #

function listAllProducts() {
    http.get(productsURL).then((products) => {
        ui.showAllProducts(products);
        ui.onLoadCounter();

        document.querySelector('.card-container').addEventListener('click', (e) => {
            if (e.target.classList.contains('add-to-cart-btn')) {
                // 1. 读取购物车，为空则初始化
                let cart = JSON.parse(localStorage.getItem("cart")) || [];
                const id = e.target.getAttribute('id');
                // 2. 找到当前点击的商品对象
                const currentProduct = products.find(item => item.id == id);
                const itemQt = document.querySelectorAll('.quantity')[products.indexOf(currentProduct)].value;
                
                // 3. 查找购物车中是否已存在同款商品
                const existItem = cart.find(item => item.id == currentProduct.id);
                if (existItem) {
                    // 已存在：累加数量
                    existItem.qt = Number(existItem.qt) + Number(itemQt);
                } else {
                    // 不存在：新增商品并赋值初始数量
                    currentProduct.qt = Number(itemQt);
                    cart.push(currentProduct);
                }

                // 4. 存回localStorage并更新UI
                localStorage.setItem("cart", JSON.stringify(cart));
                ui.showSuccessMessage(`${currentProduct.name} added to cart`, container);
                ui.cartCounter();
            }
        });
    });
}

详情页修复版 #

document.querySelector('.details-add-to-cart-btn').addEventListener('click', () => {
    // 1. 读取购物车，为空则初始化
    let cart = JSON.parse(localStorage.getItem("cart")) || [];
    const itemQt = document.getElementById('details-input').value;

    // 2. 查找购物车中是否已存在当前详情页的商品
    const existItem = cart.find(item => item.id == product.id);
    if (existItem) {
        // 已存在：累加数量
        existItem.qt = Number(existItem.qt) + Number(itemQt);
    } else {
        // 不存在：新增商品并赋值初始数量
        product.qt = Number(itemQt);
        cart.push(product);
    }

    // 3. 存回localStorage并更新UI
    localStorage.setItem("cart", JSON.stringify(cart));
    ui.showSuccessMessage(`${product.name} added to cart`, detailsContainer);
    ui.cartCounter();
});

两个页面统一使用以下处理流程，保证逻辑一致性：

• 读取localStorage的购物车数据，为空则初始化为空数组，避免null报错
• 拿到当前要添加的商品对象、用户输入的购买数量
• 遍历购物车数组，查找是否存在id与当前商品id一致的元素
• 匹配到已存在元素：直接累加对应数量
• 遍历完未找到匹配元素：给当前商品添加数量属性后插入购物车数组
• 最后将更新后的购物车数组写回localStorage，更新UI提示与购物车计数

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