JavaScript LocalStorage加载异常：项重复显示8次问题求助

问题出在for...in循环的特性上：它会遍历对象的所有可枚举属性，包括localStorage原型链上的内置方法（比如clear、getItem、setItem等），同时还会包含length属性——这就是你console输出8条内容的原因：2条用户数据+1个length属性+5个原生方法，总共8项。遍历这些额外属性时，即便你的判断逻辑能过滤掉大部分无效项，也会导致有效数据被重复处理，最终出现每个待办项显示8次的问题。

两种修复方案： #

• 方案一：用Object.keys获取自有属性键
  直接拿到localStorage中仅属于用户存储的键数组，再遍历处理，彻底避开原型链属性：

  const storageKeys = Object.keys(localStorage);
  for (const key of storageKeys) {
    if (key.startsWith("LIST_ITEM_")) { // 用startsWith比includes更精准，避免误判
      const itemValue = localStorage.getItem(key);
      // 这里执行创建显示元素的逻辑
    }
  }
  

• 方案二：在for...in中过滤自有属性
  保留for...in循环，但通过hasOwnProperty排除原型链上的属性：

  for (const key in localStorage) {
    if (localStorage.hasOwnProperty(key) && key.startsWith("LIST_ITEM_")) {
      const itemValue = localStorage[key];
      // 创建显示元素的逻辑
    }
  }
  

另外建议用startsWith("LIST_ITEM_")替代includes("LIST_ITEM")，避免出现键中意外包含"LIST_ITEM"的非用户数据被误处理的情况。

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