JavaScript数组去重并动态更新LocalStorage问题求助

问题分析 #

原函数的核心问题是未对ProfiliD做唯一性校验，直接向数组推送新对象导致重复数据；同时之前的操作可能误将数组嵌套存储，造成数据结构混乱。

修改后的代码 #

PUSHData() {
  // 构造要保存的新对象
  const myobj = {
    Button: this.isReadMore,
    Class: this.sampleElem.className,
    ProfiliD: this.id
  };

  // 从LocalStorage获取数据，确保是标准数组格式（修复嵌套问题）
  let savedData = JSON.parse(localStorage.getItem('CollapseState'));
  // 初始化数组：若获取的数据不是有效数组，重置为空数组
  let updatedArray = Array.isArray(savedData) ? savedData : [];

  // 过滤数组：移除所有与新对象ProfiliD重复的旧数据
  updatedArray = updatedArray.filter(item => item.ProfiliD !== myobj.ProfiliD);

  // 添加新对象到数组
  updatedArray.push(myobj);

  // 同步更新LocalStorage和实例数组
  localStorage.setItem('CollapseState', JSON.stringify(updatedArray));
  this.array = updatedArray;
}

关键逻辑说明 #

• 数据初始化校验：通过Array.isArray()确保操作的是标准数组，解决之前LocalStorage中数组嵌套的混乱问题。
• 唯一性保障：用filter()方法过滤掉所有ProfiliD重复的旧对象，保证同一ProfiliD仅保留最新的对象。
• 双向同步：同时更新LocalStorage和实例的this.array，确保内存数据与本地存储数据完全一致。

额外提示 #

如果当前LocalStorage中的数据已经是嵌套混乱的结构，建议先在浏览器控制台执行localStorage.removeItem('CollapseState')清除旧数据，再使用修改后的函数，避免旧数据干扰新逻辑。

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