JavaScript中如何避免向localStorage存储的数组数据出现重复项？

• 核心问题是你用Array.includes()判断对象类型的video是否重复：JS中引用类型的相等判断是对比内存地址，哪怕两个video的内容完全一致，只要是不同的对象实例，includes永远返回false，去重逻辑完全失效
• 冗余操作：你已经尝试读取了一次存储数据，后续又调用ls.get('list')二次读取，不仅多余还可能出现取值不一致的问题
• 参数浪费：你入参传入了id字段但完全没有用到，视频数据的唯一id才是最可靠的去重判断依据

const WishlistHandler = (video, id) => {
  console.log({ video, id })
  // 只读取一次本地存储的列表数据，空值直接兜底为空数组
  const itemGet = ls.get('list') || []
  // 用唯一id判断是否已存在，规避引用类型判断失效的问题
  const isExist = itemGet.some(item => item.id === id)
  if (!isExist) {
    const newList = [...itemGet, video]
    ls.set('list', newList)
    SetWishList(newList)
  } else {
    console.log("该视频已存在于心愿单")
  }
}

• 统一只读取一次localStorage数据，空值直接兜底为数组，简化了多分支判断逻辑
• 用视频唯一id作为去重判断依据，通过Array.some()遍历匹配，只要列表里有相同id的项就判定为重复，完全解决了引用类型比较失效的问题
• 合并了空列表和已有列表的分支逻辑，代码更简洁，也避免不同分支逻辑不一致的隐性bug
• 新增重复提示，方便调试排查问题

额外优化点：如果你的video对象本身就携带id属性，还可以直接删掉入参里的id，判断条件改成item.id === video.id即可，代码更精简。

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