Блог

Я сохраняю свои товары, которые принадлежат корзине покупок, в локальном хранилище. У всего один и тот же ключ. Я использую следующий код:

 for (let i = 0; i<produkt.length; i  ) {
        .
        .
        .
  document.querySelector('a.produktlöschen' [i]).addEventListener('click', ()=>{
    const parsed = JSON.parse(localStorage.getItem('warenkorb'));
    parsed.splice(parsed.indexOf(i), 1);
    localStorage.setItem('warenkorb', JSON.stringify(parsed));
    location.reload();
 

цикл » для » предназначен для динамической корзины покупок. product1 это i=0 , product2 это i=1 …
Мой план состоит в том, что при нажатии на Якорь product[I] (зависит от того, какой якорь) удаляется.
С моим кодом удаляется только последний элемент, а не тот, на который нажата привязка.

      let produkt = [
 {
  name: '3er Set Bambuszahnbürste',
  preis: 10,
  marke: 'LifePanda',
  seit: 2020,
  bild_url: '../img/Produkt_1.jpg',
  id: 1
},
{
name: 'Nachhaltiges Einkaufsnetz',
preis: 19,
marke: 'GreenEarth',
seit: 2019,
bild_url: '../img/Produkt_2.jpg',
id: 2
}];
 

Используйте ОБЪЕКТ

У вас возникли проблемы со ссылкой (получением индекса) на элемент массива, который вы хотели удалить. Лучший способ — напрямую использовать объект вместо массива. Таким образом, вы можете называть их по имени, которое вы им присвоили, вместо того, чтобы искать способ получить индекс нужного вам элемента.

 // Using an object you can just directly assign an id that you can call anytime
const obj = {}
obj['a12e'] = {...} // obj = {a12e:{...}}  // add new properties
obj.a12e.name = ... // change properties
delete obj.a12e = //delete properties
 

Не извлекайте свои данные из локального хранилища

Также лучше, если все элементы будут храниться в Массиве Объектов или Объектов (зависит от ваших предпочтений). Таким образом, при удалении элемента вы можете удалить его из массива, а затем сохранить массив в локальном хранилище. Лучше, чем разбирать строковый объект и снова строчить его при изменении продуктов(это отнимает так много времени).

Давайте тогда сравним понятия

Изменение элемента непосредственно из локального хранилища:
0# onclick
1# получить JSON из локального хранилища
2# проанализировать JSON в массив
3# удалить элемент из массива
4# преобразовать массив в строковый JSON
5# сохранить строковый JSON в локальном хранилище

Изменение элемента в массиве/объекте:
0# onclick
1# удалить элемент из массива/объекта
2# преобразовать массив/объект в строковый JSON
3# сохранить строковый JSON в локальное хранилище

Пример

 // HTML

<div class=item id=item0><span>Cheese cake </span><button class=remove>x</button></div>
<div class=item id=item1><span>Chocolate cake </span><button class=remove>x</button></div>
<div class=item id=item2><span>Strawberry cake </span><button class=remove>x</button></div>
<div class=item id=item3><span>Double Chocolate cake </span><button class=remove>x</button></div>

// JavaScript

const productItemsObject = {}

localStorage.setItem('products', JSON.stringify(productItemsObject))

for (let items of document.querySelectorAll('.item')) {

  productItemsObject[items.id]={name: items.children[0].innerText} // store everything in an object
  
  items.children[1] /*button*/ .addEventListener('click', function() {
    
    //Using an Object
    delete productItemsObject[items.id] // remove item from array
    localStorage.setItem('productsObj', JSON.stringify(productItemsObject)) // update the data in localStorage only after every change
    
    items.remove()
    
    console.log("Object",localStorage.productsObj)
  })
}