使用JavaScript从localStorage中删除嵌套项

Question

我可以帮您翻译。这篇文章涉及到 IT 技术方面的内容。当用户点击“addToCart”按钮时，页面上特定的商品将被保存在本地存储中，并在购物车中显示出来。这些商品的格式是 cartItems={[product.title]:product}，然后使用以下代码将其存储：localStorage.setItem('productsInCart',JSON.stringify(cartItems));。例如，当一个名为Jack Daniels 1L的商品被存储在本地存储中时，我会在本地存储中得到下面这样一个表格：

Key Value
    
cartNumbers 1
productsInCart  {"Jack Daniels 1L":{"title":"Jack Daniels 1L","cost":3850,"cartConts":1}}
totalCost   3850

一旦产品显示在购物车中，就会有一个删除按钮，可以用来删除它，特别是从本地存储中删除，即我希望从本地存储中删除以下条目：{"Jack Daniels 1L":{"title":"Jack Daniels 1L","cost":3850,"cartConts":1}}。下面是当点击删除按钮时调用的函数，但我希望它能起作用，但却没有：

function removeCartItem(event){

    var buttonClicked = event.target;
    
     if (buttonClicked) {
        var current = buttonClicked.parentElement.parentElement;
        var title = current.querySelectorAll('.cart-item-title')[0].innerText;
        var cartItems = localStorage.getItem('productsInCart');
            cartItems = JSON.parse(cartItems)

        if (cartItems) {
            var itemKeys = Object.keys(cartItems);
                for (var i = 0; i < itemKeys.length; i++) {
                    var key = itemKeys[i]
                    console.log(key)//in this case prints: Jack Daniels 1L, as desired.
                    if (title === key ) {
                        localStorage.removeItem(key)
                    }
                }
        }
    }
} 

最佳处理方式是什么？

- The_Ogre

---

PS: 除非你真的知道自己在做什么，否则永远不要使用event.target。始终坚持使用event.currentTarget代替。（例如，在按钮内放置一个<i>标签，你就会明白为什么）。 - undefined

buttonClicked.parentElement.parentElement.parentElement.... 正在等待你稍微修改HTML标记，以优雅地使你编写的JS代码失败。请使用.closest()代替。 - undefined

尽量不要使用文本作为您的唯一标识符（例如：“Jack Daniels 1L”）。请始终尝试使用一些UID。将此类UID存储在data-*属性中，例如：data-id="245"，给定以下数据：{"245": {id: "245", "title":"Jack Daniels 1L","cost":3850,"cartConts":1}} - undefined

Answer 1

在您的情况下，没有需要删除的LocalStorage键 - 因为您唯一的LS键是完整的productsInCart，其中包含几乎所有购物车数据。
您只需从对象中delete一个属性/值。因此，请使用Object的delete。
删除对象条目后，只需将整个字符串化的productsInCart对象数据存回LS即可。

// Get <button> and UID
const EL_button = event.currentTarget;
const id = EL_button.closest("[data-id]"); // i.e: "245"

// Parse LS 
const cartItems = JSON.parse(localStorage.productsInCart || "{}");  // Object

// Check if exists
if (cartItems.hasOwnProperty(id)) {
  // Exists in LS cart! 
  // Delete it!
  delete cartItems[id];
  // Update LS:
  localStorage.productsInCart = JSON.stringify(cartItems);
  // Do something with that button:
  EL_button.textContent = "Add to cart";
}

以上代码给出了一个类似于HTML的结构，即：

<div data-id="245">
  Juicy Peach 3dl - 2$
  <button type="button" data-id="245">Remove from cart</button> 
</div>
<div data-id="455">
  Energy overflow 1L - 5$
  <button type="button" data-id="455">Remove from cart</button> 
</div>

同时还有一个类似于以下JSON数据:

{
  "245" : {"id":"245", "name":"Juicy Peach 3dl", "price":"2", "cartConts":1},
  "455" : {"id":"455", "name":"Energy overflow 1L", "price":"5", "cartConts":0},
}

- Roko C. Buljan