Как удалить элемент из массива в local storage по его индексу?

Question

[Иван]

Я добавляю карточки в корзину с помощью local storage, которые записаны в 1 массив. Как мне удалить карточку по её индексу в этом массиве? Пока что я удаляю только 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 class="card-content-box">
          <ul>
            <li class="delete-card-btn-box"><button class="delete-card-btn"></button></li>
            <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 class="quantity-btn minus">-</button>
                  <p class="quantity">1</p>
                  <button class="quantity-btn plus">+</button>
                </li>
                <li class="price">${productInfo.price}</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
`

    const alreadyInStorageCart = JSON.parse(localStorage.getItem('productInfo')) || "[]"
    const productInfoStorage = localStorage.setItem('productInfo', JSON.stringify([...alreadyInStorageCart, cartCardHTML]))
  }
})

А ЭТОТ В КОРЗИНЕ

const cartCardBox = document.querySelector('.cart-card-box')

if (localStorage.length > 0) {
  cartCardBox.insertAdjacentHTML('beforeend', JSON.parse(localStorage.getItem('productInfo')))
}

window.addEventListener('click', function(event) {
  if (event.target.classList.contains('delete-card-btn')) {
    const Card = event.target.closest('.card')
    Card.remove()
  }
})

Comments

[Сергей delphinpro]

Для начала стоит понять, в localstorage вы можете хранить только строки. И ничего более. Там не может быть массивов и других типов и структур данных.

Answer 1

[Radiks Alijevs]

Сохранение данных продуктов в localStorage

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').className, // Используйте className
      name: cardHTML.querySelector('.card-title').innerText,
      desc: cardHTML.querySelector('.card-desc').innerText,
      price: cardHTML.querySelector('.card-price').innerText,
    };

    const alreadyInStorageCart = JSON.parse(localStorage.getItem('productInfo')) || [];
    localStorage.setItem('productInfo', JSON.stringify([...alreadyInStorageCart, productInfo]));
  }
});

Генерация HTML из данных в localStorage

const cartCardBox = document.querySelector('.cart-card-box');

if (localStorage.length > 0) {
  const products = JSON.parse(localStorage.getItem('productInfo'));
  products.forEach((product, index) => {
    const cartCardHTML = `
      <li class="card" data-index="${index}">
        <ul class="card-box">
          <li class="${product.img}"></li>
          <li class="card-content-box">
            <ul>
              <li class="delete-card-btn-box"><button class="delete-card-btn">Delete</button></li>
              <li class="card-title">${product.name}</li>
              <li class="card-desc">${product.desc}</li>
              <li class="price">${product.price}</li>
            </ul>
          </li>
        </ul>
      </li>
    `;
    cartCardBox.insertAdjacentHTML('beforeend', cartCardHTML);
  });
}

Удаление элемента по индексу

window.addEventListener('click', function(event) {
  if (event.target.classList.contains('delete-card-btn')) {
    const card = event.target.closest('.card');
    const index = parseInt(card.dataset.index, 10); // Получите индекс из атрибута data-index

    const products = JSON.parse(localStorage.getItem('productInfo'));
    products.splice(index, 1); // Удаляет элемент по индексу
    localStorage.setItem('productInfo', JSON.stringify(products)); // Сохраняем измененный массив обратно в localStorage

    card.remove(); // Удаление HTML карточки
  }
});

Comments

[Иван]

Огромное спасибо!!!

Answer 2

[Александр]

Извлечь из localstorage значение -> преобразовать из строки в массив JSON.parse() -> сделать что надо с массивом -> сохранить в localstorage JSON.stringify()

Answer 3

[Nik Faraday]

localStorage.removeItem('productInfo')

Comments

[Иван]

этот код удаляет все карточки сразу, а не одну по её индексу

[Александр Бер]

Иван, localStorage может хранит значения только как строку, а следовательно там нет ни каких индексов. Ответ дали в комментарии ниже.

[Nik Faraday]

Иван, два варинта.

1. Добавлять в localStorage каждую карточку отдельный элементом

localStorage('productInfo-1', ...);
localStorage('productInfo-2', ...);
localStorage('productInfo-N', ...);

2. Сериализировать/Десериализировать карточки в виде массива

let produts = ...
let jsonProducts = JSON.strringify(products)
localStorage.setItem('products', jsonProducts)

let jsonProducts = localStorage.getItem('products')
let products = JSON.parse(jsonProducts)
products = products.shift(...)
localStorage.setItem('products', jsonProducts)