LocalStorage.key()返回相同键值如何解决？附存储与DOM元素移除方案

你搞错了localStorage.key()的用法——这个方法的参数是索引序号（数字），不是存储的值。你传element.value（字符串类型）进去，会被强制转换成NaN，而localStorage.key(NaN)等价于localStorage.key(0)，所以每次都返回localStorage里的第一个键，这就是所有情况返回相同键的原因。

要通过值找到对应的键，你需要遍历localStorage的所有键，逐一对比键对应的值是否和element.value匹配，修正后的代码如下：

function removefrom() {
  const element = document.activeElement;
  const targetValue = element.value;
  let targetKey = null;

  // 遍历所有localStorage键，查找对应值匹配的键
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    if (value === targetValue) {
      targetKey = key;
      break; // 找到第一个匹配的就停止，若要删除所有匹配值的键则去掉break
    }
  }

  if (targetKey) {
    localStorage.removeItem(targetKey);
    element.remove();
  }
}

额外说明 #

• 如果localStorage中有多个键对应同一个值，上面的代码只会删除第一个匹配的；如果需要删除所有对应这个值的键，去掉break语句即可。
• 确保element.value和localStorage中存储的值类型一致（localStorage只能存字符串，注意类型转换问题），避免因类型不匹配导致找不到目标键。

内容的提问来源于stack exchange，提问作者pew-dew