Как сделать кнопку для удаление на js или jquery данных из массива localstorage?

Question

[Алексей]

При добавлении товара в корзину создается массив products с ключом cart Как сделать так чтобы в колличестве товара отображалось необходимое значение? Эти товары просто добавляются в массив с колличеством один и дублируются. Не пронимаю как обратиться к этому массиву чтобы происходило удаление по кнопке btn-del?

const deleteBtn = document.querySelectorAll(".btn-del"); // Ищем по класу. sd должно быть уникальным
deleteBtn.forEach(function(el) {
  el.addEventListener("click", function(event) {
    let id = event.target.dataset.id; // Берем id
    let itemIndex = data.findIndex(item => +item.id === +id); // Ищем индек элеменда в списке
    if (itemIndex === -1) return;
    data.splice(itemIndex, 1); // Удаляем из списка
    localStorage.setItem("cart", JSON.stringify(myCart));
    location.reload(); // Обновляем страницу и тогда не будет элемента
    // Или без обновления удаляем через js
  });
});

Comments

[szQocks]

перед тем как добавить товар в корзину, проверяешь есть ли он в корзине, если он есть - просто нужному объекту увеличиваешь count, если его там нет - только в этом случае добавляешь в массив товар

и тогда проблем с логикой удаления не будет, щас код у тебя рабочий для удаления продукта из корзины

Answer 1

[Stalker_RED]

В localStorage хранится строка.
Нужно получить эту строку, преобразовать её в JSON, удалить какой-то товар, снова преобразовать в строку и сохранить в localStorage.

Вы привели кусок кода, который удаляет что-то из data, и записывает в localStorage.
При этом откуда берётся эта data - непонятно.

Comments

[Алексей]

Вот другой код реализации, но он тоже не работает. Работает только на добавление товара в корзину.

/*  Создаем объект корзины и сохраняем его в localStorage   */
const myCart = new Cart();

if (localStorage.getItem("cart") == null) {
  localStorage.setItem("cart", JSON.stringify(myCart));
}

const savedCart = JSON.parse(localStorage.getItem("cart"));
myCart.products = savedCart.products;
cartNum.textContent = myCart.count;

/* Добавляем товар в корзину */
myCart.products = cardAddArr.forEach((cardAdd) => {
    cardAdd.addEventListener("click", (e) => {
      e.preventDefault();
      const card = e.target.closest(".card");
      const product = new Product(card);
      const savedCart = JSON.parse(localStorage.getItem("cart"));
      myCart.products = savedCart.products;
      myCart.addProduct(product);
      localStorage.setItem("cart", JSON.stringify(myCart));
      cartNum.textContent = myCart.count;
    });
});
/* Удаление продукта */
const productDelete = document.createElement("button");
    productDelete.classList.add("btn-del");
    productDelete.innerHTML = "✖";

    productDelete.addEventListener("click", () => {
      myCart.removeProduct(product);
      localStorage.setItem("cart", JSON.stringify(myCart));
    });

[Stalker_RED]

Алексей, вы этот код у чатгпт берете?

[Алексей]

Stalker_RED, нет, пытался как то вырулить через гугл, js пока что плохо знаю