如何保存推入数组的对象，然后使用本地存储显示它们？

Question

我正在尝试仅使用html和javascript制作一个简单的购物车。 我的购物车中有一个空数组，并且有一个名为product1的对象。 我有一个click事件，它将对象名称和价格推入数组，然后使用innerHTML显示它。 我想知道在使用本地存储刷新页面时如何将物品保存在购物车中？

Here is my javascript code.

var cart = [];

var product1 = {
    name: "product1",
    price: 90.00
};

document.getElementById("cart-button").addEventListener("click", addToCart);

function addToCart() {
    cart.push(product1.name + "<br />" + product1.price);
    document.getElementById("cart-contents").innerHTML = cart;
}

Answer 1

在将商品添加到购物车时，必须将其保存在localStorage中。 重新加载时，购物车变量从localStorage加载购物车。 如果没有localStorage var cart，它将得到一个空数组。

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

var product1 = {
    name: "product1",
    price: 90.00
};

document.getElementById("cart-button").addEventListener("click", addToCart);

function addToCart() {
    cart.push(product1.name + "<br />" + product1.price);
    localStorage.setItem('cart', JSON.stringify(cart));
    document.getElementById("cart-contents").innerHTML = cart;
}

Answer 2

更新时，您需要将购物车存储为json字符串。 您可以使用JSON.parse()在加载时对其进行解析

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

var product1 = {
    name: "product1",
    price: 90.00
};

document.getElementById("cart-button").addEventListener("click", addToCart);

function addToCart() {
    cart.push(product1.name + "<br />" + product1.price);
    localStorage.setItem('cart', cart);
    document.getElementById("cart-contents").innerHTML = cart;
}