购物车商品增删、数量调整及本地存储同步实现求助

我用Telmo Sampiao的购物车系列写了displayCart函数，但缺少商品移除、数量增减按钮的功能，也没法把这些操作同步到localStorage，自己试了很多方法都没成功，求帮忙。原代码如下：

function displayCart(){
    let cartItems = localStorage.getItem("productsInCart");
    cartItems = JSON.parse(cartItems);
    let productContainer = document.querySelector(".products");
    let cartCost = localStorage.getItem('totalCost');
    console.log(cartItems);
    if( cartItems && productContainer){
        productContainer.innerHTML = '';
        Object.values(cartItems).map(item => {
            productContainer.innerHTML += `
            <div class="product">
                <button class="btn btn-danger remove">Remove</button>&nbsp;&nbsp;
                <img src="./img/${item.tag}.jpg">
                <span>${item.name}</span>
                </div>
                <div class="price">
                ₱${item.price}.00
                </div>
                <div class="quantity"><i class="fa-solid fa-plus"></i>&nbsp;<span>${item.inCart}</span>&nbsp;<i class="fa-solid fa-minus"></i></div>
                <div class="total">
                    ₱${item.inCart * item.price}.00
                </div>
            `
        });
        productContainer.innerHTML += `
            <div class="basketTotalContainer">
            <h4 class="basketTotalTitle">
                Cart Total
                </h4>
                <h4 class="basketTotal">
                ₱${cartCost}.00
                </h4>
`;
}
}

完善后的完整代码 #

function displayCart() {
    let cartItems = localStorage.getItem("productsInCart");
    cartItems = JSON.parse(cartItems) || {};
    let productContainer = document.querySelector(".products");
    let cartCost = localStorage.getItem('totalCost') || 0;

    if (productContainer) {
        productContainer.innerHTML = '';
        
        // 渲染购物车商品列表
        Object.values(cartItems).map(item => {
            productContainer.innerHTML += `
                <div class="product" data-tag="${item.tag}">
                    <button class="btn btn-danger remove">Remove</button>&nbsp;&nbsp;
                    <img src="./img/${item.tag}.jpg">
                    <span>${item.name}</span>
                </div>
                <div class="price">₱${item.price}.00</div>
                <div class="quantity">
                    <i class="fa-solid fa-plus" data-tag="${item.tag}"></i>&nbsp;
                    <span>${item.inCart}</span>&nbsp;
                    <i class="fa-solid fa-minus" data-tag="${item.tag}"></i>
                </div>
                <div class="total">₱${item.inCart * item.price}.00</div>
            `;
        });

        // 渲染购物车总价
        productContainer.innerHTML += `
            <div class="basketTotalContainer">
                <h4 class="basketTotalTitle">Cart Total</h4>
                <h4 class="basketTotal">₱${cartCost}.00</h4>
            </div>
        `;
    }

    // 绑定动态元素的操作事件
    bindCartEvents();
}

// 事件委托处理购物车操作（移除、增减数量）
function bindCartEvents() {
    const productContainer = document.querySelector(".products");
    if (!productContainer) return;

    productContainer.addEventListener('click', (e) => {
        const target = e.target;
        const tag = target.dataset.tag;
        if (!tag) return;

        let cartItems = JSON.parse(localStorage.getItem("productsInCart")) || {};

        // 处理移除商品操作
        if (target.classList.contains('remove') || target.closest('.remove')) {
            delete cartItems[tag];
            updateTotalCost(cartItems);
            localStorage.setItem("productsInCart", JSON.stringify(cartItems));
            displayCart();
            return;
        }

        // 处理增加数量操作
        if (target.classList.contains('fa-plus')) {
            cartItems[tag].inCart += 1;
            updateTotalCost(cartItems);
            localStorage.setItem("productsInCart", JSON.stringify(cartItems));
            displayCart();
            return;
        }

        // 处理减少数量操作（最少保留1件）
        if (target.classList.contains('fa-minus')) {
            if (cartItems[tag].inCart > 1) {
                cartItems[tag].inCart -= 1;
                updateTotalCost(cartItems);
                localStorage.setItem("productsInCart", JSON.stringify(cartItems));
                displayCart();
            }
            return;
        }
    });
}

// 更新购物车总价并同步到localStorage
function updateTotalCost(cartItems) {
    let total = 0;
    Object.values(cartItems).forEach(item => {
        total += item.price * item.inCart;
    });
    localStorage.setItem('totalCost', total);
}

// 页面加载完成后自动渲染购物车
document.addEventListener('DOMContentLoaded', displayCart);

关键功能说明 #

• 事件委托绑定：因为商品元素是动态生成的，直接绑定事件会失效，所以给父容器.products添加事件监听，通过判断点击目标的类名处理操作，确保新生成的元素也能触发事件。
• 商品标识：给每个操作元素（移除按钮、加减图标）添加data-tag属性，对应localStorage中商品的唯一标识，方便快速定位要操作的商品项。
• 移除商品逻辑：点击Remove按钮时，从cartItems对象中删除对应商品，更新总价后同步到localStorage，重新渲染购物车。
• 数量增减逻辑：点击加号直接增加商品数量；点击减号时先判断数量大于1才减少，避免出现0件商品的情况，每次操作后同步数据并重新渲染。
• 总价自动计算：新增updateTotalCost函数，遍历所有商品计算实时总价，确保总价与商品数量始终同步。
• 空值容错处理：给cartItems和cartCost设置默认值（空对象、0），避免localStorage为空时出现报错。

内容的提问来源于stack exchange，提问作者Mohamad Faudzie Maliga