在javascript中从localStorage中删除嵌套项

我在页面上有某些项目，单击“addToCart”时，相应的项目保存在本地存储中，从中检索并显示在购物车中。将它们发送到本地存储的格式是

cartimes={[product.title]：product}

，然后使用行

localStorage.setItem（'productsInCart'，JSON.stringify（cartimes）））存储它们例如，当点击一个名为
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)
                    }
                }
        }
    }
} 

函数removeCartItem（事件）{
var buttonClicked=event.target；
如果（按钮勾选）{
var current=buttonClicked.parentElement.parentElement；
var title=current.querySelectorAll（'.cart item title'）[0]。innerText；
var cartimes=localStorage.getItem（'productsInCart'）；
cartItems=JSON.parse（cartItems）
如果（项目）{
var itemKeys=Object.keys（cartItems）；
对于（var i=0；i

最好的方法是什么？
没有要删除的LocalStorage键（在您的特定情况下）-因为您唯一的LS键是实际的
productsInCart
，它保存了几乎所有的购物车数据。

您只需
删除对象中的属性/值。因此，请使用对象的
删除


删除对象条目后，只需将整个字符串化的
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";
}

PS：“永远不要”使用
event.target
，除非你真的知道自己在做什么。始终坚持使用
event.currentTarget
。（例如：在按钮内放置一个
，您将看到原因）。
按钮点击。parentElement.parentElement.parentElement….
正在等待您稍微修改HTML标记，使您编写的JS失败。请改用
.closest（）
。尽量不要使用文本作为唯一标识符（例如：“Jack Daniels 1L”）。总是尝试使用一些UID。将这样的UID存储在
data-*
属性中，例如：
data id=“245”
给定此数据：
{“245”：{id:“245”，“title:“Jack Daniels 1L”，“cost”：3850，“cartConts”：1}