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

【问题标题】：How do I save objects that I push into an array, then display them using local storage?如何保存推入数组的对象，然后使用本地存储显示它们？
【发布时间】：2019-03-30 04:21:05
【问题描述】：

我正在尝试仅使用 html 和 javascript 制作一个简单的购物车。我有一个空数组作为我的购物车，我有一个名为 product1 的对象。我有一个单击事件，它将对象名称和价格推送到数组中，然后使用 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;
}

【问题讨论】：

localStorage.setItem('cart-contents', cart)
How to store and retrieve Shopping Cart items in localstorage?的可能重复

标签： javascript html arrays local-storage

【解决方案1】：

您必须在将商品添加到购物车时将其保存在 localStorage 中。重新加载时，cart 变量从 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;
}

【讨论】：

【解决方案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;
}

【讨论】：