Question

我这里的代码是购物车。我有一个功能，当添加一个新项目时保存购物车，但当我刷新页面时它不保存，它是保存功能本身吗？如果有人知道为什么那会很棒，那么请提前多多谢谢你。这是程序，从顶部开始我的jQuery函数在每次点击产品时都会向购物车添加一个额外的项目，从那里主要是函数和调用函数。

    $(".add-to-cart").click(function(event){
        event.preventDefault();//prevents links from doing default behavior
        var name = $(this).attr("data-name"); //gets the data name from the link clicked.
        var price = Number($(this).attr("data-price"));

        addItemToCart(name, price, 1);
        displayCart();
        saveCart();

    });

    function displayCart() {
        var cartArray = listCart();
        var output = "";
        for (var i in cartArray){
            output += "<li>"+ cartArray[i].name+ " "+ cartArray[i].count + "</li>"

        }
        $("#Show-cart").html(output); // this replaces the inner html of the element " Show Cart"
        $("#total-cart").html(totalCart());

    }

    // ********************************************
    // Shopping Cart Functions 
    //array
    var cart = [];
    //object
    var Item = function (name, price, count)
    {
        this.name = name
        this.price = price
        this.count = count
    };

    function addItemToCart (name, price, count){
        for (var i in cart){
            if (cart[i].name === name){
                cart[i].count +=count;
                saveCart();
                return;

            }
        }
        var item = new Item(name, price, count);
        cart.push(item);
        saveCart();
    }


    function removeItemFromCart(name) {
        for (var i in cart){
            if (cart[i].name === name){
                cart [i].count --;

                if (cart[i].count <=0)
                {
                    cart.splice(i, 1);
                    //cart[i].count =0;
                }
                break;

                }

        }
        saveCart();
    }


    function removeItemAltogether (name)
    {
        for (var i in cart ) {
            if (cart[i].name === name){
                cart.splice(i, 1);
                break;
            }
        }
        saveCart();
    }




    function emptyCart (){
        cart = [];
        saveCart()
    }

    emptyCart();
    console.log(cart);




    function countCart(){
        var total = 0; 
        for (var i in cart ){
            total += cart[i].count;

        }
        return total;



    }


    function totalCart () {
        var totalCost = 0;
        for (var i in cart ){
            totalCost += cart[i].price * cart[i].count;
        }
        return totalCost;
    }
    console.log(totalCart());

   function listCart() {
       var cartCopy = [];
       for (var i in cart){
           var item = cart[i];
           var itemCopy = {};
           for (var p in item) {
               itemCopy[p] = item[p];
           }
           cartCopy.push (itemCopy);
           }
       return cartCopy;
    }


   function saveCart(){
        localStorage.setItem("shoppingCart", JSON.stringify(cart));
    }

    function loadCart(){
        cart =JSON.parse(localStorage.getItem("shoppingCart"));
    }

    addItemToCart("Apple", 1.99, 1);
    loadCart();

    displayCart();

Answer 1

问题是，在您调用addItemToCart("Apple", 1.99, 1);之前，您在加载页面时正在调用loadCart();。这是将Apple添加到空车中，然后保存它，这会覆盖已保存的购物车。

更改这两行的顺序，或删除addItemToCart()来电。

此外，loadCart()需要处理没有购物车保存的初始情况。

function loadCart(){
    var cartJSON = localStorage.getItem("shoppingCart");
    cart = cartJSON ? JSON.parse(cartJSON) : [];
}

另一个问题：您在定义emptyCart()后立即致电$INSTALL_DIR/apps/webapps/tomcat/lib，即清除购物车。

刷新页面时，我的项目不保存在本地存储中？

1 个答案: