如何在存储在 Localstorage 中的字符串化 JSON 中仅删除一个 object？

Question

我将属于购物车的产品保存在本地存储中。 一切都有相同的钥匙。 我正在使用以下代码：

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();

for 循环用于动态购物车。 product1是i=0 ， product2是i=1 ...
我的计划是，当单击 Anchor 时，删除product[I] （取决于哪个 Anchor）。
使用我的代码，只有最后一项被删除，而不是被单击的锚点。

     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
}];

Answer 1

使用 OBJECT

您在引用（获取索引）要删除的 Array 项目时遇到问题。 更好的方法是直接使用 object 而不是 Array。 这样，您可以使用您分配给它们的名称来调用它们，而不是找到一种方法来获取您想要的项目的索引。

// 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

---

不要从 localStorage 中提取数据

此外，最好将所有项目存储在对象或对象数组中（取决于您的偏好）。 这样，当您删除一个项目时，您可以将其从数组中删除，然后将数组存储到 localStorage。 比必须解析字符串 object 并在产品发生变化时再次对其进行字符串化要好（这会消耗很多时间）

让我们比较一下这些概念

直接从 localStorage 更改项目：
0# onclick
1# 从 localStorage 获取 JSON
2#将JSON解析为数组
3# 从数组中删除项目
4# 将数组转换为字符串 JSON
5# 将字符串化的 JSON 存储到 localStorage

更改数组/对象中的项目：
0# onclick
1# 从数组/对象中删除项目
2# 将数组/对象转换为字符串化 JSON
3# 将字符串化的 JSON 存储到 localStorage

例子

// 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)
  })
}