Как сохранить объекты, которые я помещаю в массив, а затем отобразить их с помощью локального хранилища?

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

При обновлении необходимо сохранить корзину в виде строки 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;
}

Answer 2

Вы должны сохранить его в localStorage во время добавления товаров в корзину.При перезагрузке переменная cart загружает корзину из localStorage.Если нет локальной корзины varStorage, она получает пустой массив.

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