javascript - Array.push 不适用于本地存储

Question

我正在创建一个购物车，用户可以将商品添加到购物车。用户单击 addtocart 按钮后，我想将产品 ID、名称、价格和数量保存到本地存储，然后在购物车页面上检索它们。所以我尝试了这个

  var cart = new Array;

    if (cart != []) {
        cart = JSON.parse(localStorage["cart"]);
    }

  $('#addtocart').on('click', function(e) {

var qty = document.getElementById("p-qty").value;
var li = $(this).parent();


var product = {};
product.id = productid;
product.name = document.getElementById("nomenclature").innerHTML;
product.price = document.getElementById("productprice").innerHTML;
product.quantity = qty;

addToCart(product);
});


 function addToCart(product) {
// Retrieve the cart object from local storage
if (localStorage) {
    var cart = JSON.parse(localStorage['cart']);            

    cart.push(product);

    localStorage.setItem('cart', JSON.stringify(cart));
}

// window.location = "html/cart.html"   
}

但我不断收到此错误

Uncaught TypeError: cart.push is not a function

我做错了什么以及如何解决它？

Answer 1

您不检查 localStorage['cart'] 是否已定义，也不检查反序列化变量是否为数组。我建议这样做:

function addToCart(product) {
    if (localStorage) {
        var cart;
        if (!localStorage['cart']) cart = [];
        else cart = JSON.parse(localStorage['cart']);            
        if (!(cart instanceof Array)) cart = [];
        cart.push(product);

        localStorage.setItem('cart', JSON.stringify(cart));
    } 
}

但请注意，如果 localStorage['cart'] 中有序列化对象或其他非数组变量，则该方法将覆盖它。