Array.push不适用于本地存储

Question

I am creating a shopping cart where user can add an item to cart. Once user clicked the addtocart button, I want to save the product id, name, price and quantity to local storage and then retrieve them on the cart page. So I tried this

  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"   
}

but I keep getting this error

Uncaught TypeError: cart.push is not a function

What am I doing wrongly and how can I fix it?

Answer 1

You don't check that localStorage['cart'] is defined and don't check that the deserialized variable is an array. I'd suggest doing something like this:

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));
    } 
}

Note, however, that if you have a serialized object or other non-array variable in localStorage['cart'] , it will be overwritten with this method.

Answer 2

Now with your edit, problem you have here is this makes no sense. First You set the array to be empty, so it will always be empty. Now second issue is [] will never equal new Array so it will always go into the if statement. And since you probably never set localStorage["cart"] with anything, it will be invalid.

var cart = new Array;  // <-- you define an array?
if (cart != []) {  // <- than you check the array you just created? How would it have a value if this check would actually work?
    cart = JSON.parse(localStorage["cart"]);
}

So what you need to do is get rid of that if, since it does nothing. Next you just need to check localstorage if it has a value, if it does not, than set it to an emoty array. So add a conditional that if it is undefined, it uses a new array

Now what your codde should have been was

var cart = []; //define the array
if (localStorage["cart"]) {  // Check that it has a value in storage
    cart = JSON.parse(localStorage["cart"]); //If yes, parse it
}

or another way could be

var cart = JSON.parse(localStorage['cart'] || '[]');   

Answer 3

localStorage in HTML5 is Object, you can set item by using .setItem() and get item by .getItem()

Demo get old values, push new value and save values with localStorage

    var Values = [];

    //get olds values
    Values = JSON.parse(localStorage.getItem('Storage')); 

    //push new value
    Values.push(item);

    //saved values
    localStorage.setItem('Storage', JSON.stringify(Values));