Как сделать так, чтобы в массив, который находится в local storage записывалось новое значение, а не заменялось на последнее?

Question

[Иван]

Я сделал так, чтобы при нажатии на кнопку карточки, все её данные записывались в local storage, а потом из него добавлялись в html файл с корзиной. Но в корзине появляется последняя карточка, которую я добавил.
Как сделать чтобы все карточки сохранялись в корзину, а не только последняя?

Этот код находится на главной странице, откуда берутся данные

window.addEventListener('click', function(event) {
  if(event.target.classList.contains('card-btn') || event.target.classList.contains('adaptive-price')) {

    const cardHTML = event.target.closest('.card')

    const productInfo = {
      img: cardHTML.querySelector('.card-img').classList,
      name: cardHTML.querySelector('.card-title').innerText,
      desc: cardHTML.querySelector('.card-desc').innerText,
      price: cardHTML.querySelector('.card-price').innerText,
    }

    const cartCardHTML = `
    <li class="card">
      <ul class="card-box">
        <li class="${productInfo.img}"></li>

        <li>
          <ul>
            <li class="card-title">${productInfo.name}</li>
            <li class="card-desc">
              ${productInfo.desc}
            </li>
            <li>
              <ul class="price-quantity-box">
                <li class="quantity-box">
                  <button id="minus" class="quantity-btn" onclick="minusQuantity()">-</button>
                  <p id="quantity" class="quantity">1</p>
                  <button id="plus" class="quantity-btn" onclick="plusQuantity()">+</button>
                </li>
                <li class="price">${productInfo.price}</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
`
  const productInfoStorage = localStorage.setItem('productInfo', JSON.stringify([cartCardHTML]))
  }
})

Этот код находится на странице с корзиной

const cartCardBox = document.querySelector('.cart-card-box')
const cartNothingTitle = document.querySelector('.basket-clear-title')

if (localStorage.length > 0) {
  cartNothingTitle.style.cssText = "position: absolute; opacity: 0; pointer-events: none;"
  cartCardBox.insertAdjacentHTML('beforeend', JSON.parse(localStorage.getItem('productInfo')))
}

Comments

[Модератор]

Вопрос не удалён по причинам «тег-спам» и «ответ легко ищется поисковиком» только из уважения к ответившим. В следующий раз такого не будет.

Answer 1

[Егор Живагин]

В первом куске кода замените

const productInfoStorage = localStorage.setItem('productInfo', JSON.stringify([cartCardHTML]))

на

const alreadyInStorage = JSON.parse(localStorage.getItem('productInfo'));
const productInfoStorage = localStorage.setItem('productInfo', JSON.stringify([...alreadyInStorage, cartCardHTML]))

Иначе вы всегда в productInfo пишете массив с одним элементом

Comments

[Иван]

Спасибо огромное!!!!Вы меня выручили