localStorage removeItem无法删除键值对问题求助及原因分析

问题描述 #

我遇到了一个困惑：通过代码动态获取的键值调用localStorage.removeItem(rowItem)无法删除对应的项，但如果直接硬编码相同的字符串（例如localStorage.removeItem("Puppy")）却能成功。我已经用console.log(rowItem)确认，输出的内容和localStorage中的键完全一致。

相关删除代码如下：

// Remove item
$("#shoppingTable > tbody").on("click", "i", (function(){
 let currentRow = $(this).closest("tr");
 let rowItem = currentRow.find("td:eq(0)").text().substring(1);
 // Delete from LS
 localStorage.removeItem(rowItem);
 // Delete from UI
 $(this).closest('tr').remove();
}));

问题排查与解决 #

感谢Aamir Nakhwa的提醒，最终发现问题不在上述的删除函数本身，而是页面中另一个事件监听函数引发了冲突：

$(".ui.container").on("click", "tr",(function(){
  // 该函数的选择器范围和删除逻辑重叠，导致事件冲突
}));

冲突原因 #

当你点击删除图标（<i>元素）时，事件会向上冒泡到父元素<tr>，触发了绑定在<tr>上的另一个点击事件。这个额外的事件干扰了删除逻辑的正常执行，导致localStorage.removeItem(rowItem)没有按预期工作。

修复方案 #

在删除按钮的点击事件中添加e.stopPropagation()来阻止事件冒泡，避免触发父元素的点击事件：

// Remove item
$("#shoppingTable > tbody").on("click", "i", (function(e){
  // 阻止事件冒泡到父级<tr>元素
  e.stopPropagation();
  
  let currentRow = $(this).closest("tr");
  let rowItem = currentRow.find("td:eq(0)").text().substring(1);
  // Delete from LS
  localStorage.removeItem(rowItem);
  // Delete from UI
  $(this).closest('tr').remove();
}));

这样修改后，点击删除图标时只会执行删除逻辑，不会触发<tr>上的其他事件，localStorage.removeItem(rowItem)就能正常根据动态获取的键删除对应项了。

内容的提问来源于stack exchange，提问作者Code-shark1