removeFromLocalStorage仅手动执行有效 触发调用时无法删除localStorage条目

问题根因 #

核心问题是id的类型不匹配导致全等判断失效：

• 你在addItem函数中生成的id是Math.floor()返回的数字类型，存入localStorage时id保持为数字类型
• 从DOM元素dataset.id读取到的所有值默认都是字符串类型，deleteItem传入removeFromLocalStorage的id是字符串格式
• 你用!==做全等比较时，会同时校验类型和值，两类id值相同但类型不同，判断结果为false，filter不会过滤掉目标条目，最终表现为删除失败。你手动在控制台调用时传的如果是数字类型id，自然能匹配成功。

验证方法 #

在removeFromLocalStorage函数中添加一行日志即可确认：

console.log('传入id类型：', typeof id, '存储id类型：', typeof storageItems[0].id)

修复方案 #

任选一种即可，更推荐方案1从根源统一类型：

方案1：生成id时统一转为字符串 #

修改addItem中id生成的逻辑：

const id = String(Math.floor(Math.random() * 9999999999))

方案2：比较时统一转为相同类型 #

修改removeFromLocalStorage中的过滤逻辑，同时可以简化filter的写法（filter回调只需要返回布尔值即可，无需返回整条数据）：

storageItems = storageItems.filter(function(singleItem) {
  return singleItem.id !== Number(id)
})

内容的提问来源于stack exchange，提问作者Echo Sierra