Перезаписать данные в localstorage

Question

Всем привет. JS в процессе изучения. Работаю над корзиной в интернет-магазине. Суть такая: в html-разметке есть карточки товаров и есть попап с корзиной. При нажатии "Добавить товар" товар попадает в корзину. Данные из корзины записываются в Local Storage. При повторном нажатии на "Добавить товар" в корзине кол-во товара увеличивается, а в Local Storage остается то, что было добавлено при первом нажатии. Где собака зарыта?

В коде сделал комменты, чтобы было проще разобраться.

Кусок кода 1. Функции записи и вывода из localstorage

        function updateStorage() {
            let parent = document.querySelector('.cart-items');
            let html = parent.innerHTML.trim();

            if (html.length) {
                localStorage.setItem('itemsInCart', html);
            } else {
                localStorage.removeItem('itemsInCart'); 
            };
        }

        
        function initialState() {
            if (localStorage.getItem('itemsInCart') !== null) {
                document.querySelector('.cart-items').innerHTML = localStorage.getItem('itemsInCart');
            };
        };

        initialState();

Кусок кода 2. Задаю шаблон товара в корзине и данные, которые подставляются в шаблон.

const cartWrapper = document.querySelector('.cart-items');

window.addEventListener('click', function (event){

    if (event.target.hasAttribute('data-cart')) {
        const card = event.target.closest('.item');
        const productInfo = {
            id: card.dataset.id,
            imgSrc: card.querySelector('.item__image img').getAttribute('src'),
            title: card.querySelector('.item__title').innerText,
            price: card.querySelector('.item__price').innerText,
            counter: card.querySelector('[data-counter]').value
        };

                
        //Проверка: есть ли товар в корзине? и действия, если есть и если нет

        const itemInCart = cartWrapper.querySelector(`[data-id="${productInfo.id}"]`);
        
        if (itemInCart) {
            const counterElement = itemInCart.querySelector('[data-counter]');
            counterElement.value = parseInt(counterElement.value) + parseInt(productInfo.counter);

        } else {
        
        //Шаблон для добавления нового товара в корзину
        
        const cartItemHTML = `
                    <div class="cart-items__item cart-item" data-id="${productInfo.id}">
                        <div class="cart-item__image">
                            <img src="${productInfo.imgSrc}" alt="productincart">
                        </div>
                        <div class="cart-item__content">
                            <h4 class="cart-item__title">${productInfo.title}</h4>
                            <p class="cart-item__subtitle">Характеристика 1, характеристика 2, характеристика 3</p>
                        </div>
                        <div class="cart-item__count inputs">
                            <button class="minus" data-action="minus">-</button>
                            <input class="input" type="text" value="${productInfo.counter}" data-counter>
                            <button class="plus" data-action="plus">+</button>
                        </div>
                        <div class="cart-item__price">
                            ${productInfo.price}
                        </div>
                        <button class="cart-item__delete" type="button" data-delete>X</button>
                    </div>
        `;
        
        //Добавление нового товара в корзину
        cartWrapper.insertAdjacentHTML('beforeend', cartItemHTML);

        //Сброс счетчика после добавления товара в корзину
        card.querySelector('[data-counter]').value = 1;
        

        //Обновление localstorage
        updateStorage();

        };

    };
    
});

БЛОГ НА HUSL

Перезаписать данные в localstorage

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