Vue.js项目中localStorage存储内容去重的问题及解决方案咨询

• 现有代码的点击事件逻辑未做重复内容校验：每次触发点击时直接将目标文本追加到存储数组中，不会提前判断该文本是否已经存在
• localStorage仅负责数据持久化存储，本身没有内置去重机制，多次点击就会生成多条重复的文本记录

核心逻辑是新增内容前先做重复校验，仅当内容不存在时才执行写入操作，具体实现步骤如下：

1. 每次点击按钮后，先从localStorage中读取已存储的文本列表，无历史数据时初始化为空数组
2. 使用includes()方法判断待添加的文本是否已存在于列表中
3. 仅当文本不存在时，才将其推入数组并同步更新到localStorage中

参考实现代码：

// 按钮点击触发函数，text为待添加的目标文本
function addUniqueText(text) {
  // 读取本地存储的历史文本列表，反序列化为数组
  const savedTexts = JSON.parse(localStorage.getItem('textList') || '[]')
  // 校验当前文本是否已存在
  if (!savedTexts.includes(text)) {
    savedTexts.push(text)
    // 重新序列化后存回localStorage
    localStorage.setItem('textList', JSON.stringify(savedTexts))
    // 此处可添加页面内容渲染的相关逻辑
  }
}

如果后续需要存储的是对象类型的数据，替换includes()为自定义的属性匹配逻辑即可实现去重。

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