Как сохранить данные (объект js) в localStorage и вывести их на другой странице?

Question

Реализован функционал корзины на сайте. Хочу понять как сделать так, чтобы брались данные отсюда, записывались в localStorage и на другой странице забирать данные и выводить на экран?

const cartBody = document.querySelector(".cart-body");
// const cart = {};
window.addEventListener('click', function (e) {

    if (e.target.hasAttribute("data-cart")) {
        const card = e.target.closest(".product-card");
        // Переменная в которой храним данные о товаре
        const productInfo = {
            id: card.dataset.id,
            imgSrc: card.querySelector('.product-image').getAttribute('src'),
            title: card.querySelector('.product-title').innerText,
            description: card.querySelector('.product-description').innerText,
            price: card.querySelector('.product-price').innerText,
            counter: card.querySelector('[data-counter]').innerText
        };
        
        // localStorage.setItem('cart', JSON.stringify(productInfo));

        
        // Если товар уже в корзине
        const itemInCart = cartBody.querySelector(`[data-id="${productInfo.id}"]`);

        if (itemInCart) {
            countEl = itemInCart.querySelector('[data-counter]');
            countEl.innerText = parseInt(countEl.innerText) + parseInt(productInfo.counter);
        } else {
            const cartItemHTML =
                `<div class="item-in-cart">
                    <div class="product-card cart-card" data-id="${productInfo.id}">
                        <div class="container cart-items">

                            <div class="cart-image">
                                <img src="${productInfo.imgSrc}"/>
                            </div>

                            <div class="cart-name">
                                <h4 class="cart-title"> ${productInfo.title}
                                </h4>
                                <h5 class="cart-description"> ${productInfo.description}
                                </h5>
                            </div>

                            <div>             
                                <span   class="product-price"> ${productInfo.price} </span>
                            </div>

                            <div class="product-number"> 
                                <div  data-action="minus">-</div>
                                <div class="number" data-counter>${productInfo.counter}</div>
                                <div  data-action="plus">+</div>
                            </div>

                        </div>
                    </div>
                </div>`

            cartBody.insertAdjacentHTML('beforeend', cartItemHTML);
        }
        // Сбрасываем счетчик если добавили товар
        card.querySelector(["[data-counter]"]).innerText = "1";

        cartStatus();
    }
});

function cartStatus() {
    const cartTotal = document.querySelector(".cart-total");
    const cartEmpty = document.querySelector("[data-cart-empty]");
    const orderForm = document.querySelector(".order-form");

    // Есть товары    
    if (cartBody.querySelectorAll('.item-in-cart').length > 0) {
        cartEmpty.classList.add('none');
        cartTotal.classList.remove('none');
        orderForm.classList.remove('none');
    }
    // Если корзина ПУСТА
    else {
        cartEmpty.classList.remove('none');
        cartTotal.classList.add('none');
        orderForm.classList.add('none');
    }
    // Стоимость всего заказа
    let totalPrice = 0;
    cartBody.querySelectorAll(".item-in-cart").forEach(function (item) {

        const cartCounter = item.querySelector("[data-counter]").innerText;
        const priceOneItem = item.querySelector(".product-price").innerText;
        const price = parseInt(cartCounter) * parseInt(priceOneItem);

        totalPrice = totalPrice + price;
    });
    cartTotal.querySelector(".total-price").innerText = totalPrice;
};

Как это реализовать правильно?

Answer 1

Легко:

window.localStorage.setItem('key', 'value')
window.localStorage.getItem('key')

const obj = [
  {
    key: 1, value: 'string 1',
    key: 2, value: 'string 2',
  }
]

window.localStorage.setItem('key2', JSON.stringify(obj))
const key2 = window.localStorage.getItem('key2')

const data = JSON.parse(key2)

БЛОГ НА HUSL

Как сохранить данные (объект js) в localStorage и вывести их на другой странице?

Ответы (1 шт):