如何将基于数组的大学项目详情唯一存储逻辑迁移至LocalStorage（重复添加时提示已存在）

我明白你的需求啦——把原来基于内存数组的逻辑改成用LocalStorage持久化存储，同时保留点击去重的功能。咱们一步步来调整代码：

首先要注意，LocalStorage只能存储字符串，所以咱们需要用JSON.stringify()把数组转成字符串存进去，取出来的时候用JSON.parse()转回到数组。另外，原来的includes()方法没法直接判断对象是否存在（因为从LocalStorage取出来的对象是新的引用），所以咱们得用对象的唯一标识（比如ProgramId）来做重复判断，这才是靠谱的方式。

下面是重构后的代码：

getProgramDetails = (ppTermDetails) => { 
  // 1. 从LocalStorage获取已存储的项目列表，没有的话初始化空数组
  let selectedProgramList = JSON.parse(localStorage.getItem('selectedPrograms')) || [];

  // 2. 用唯一标识（比如ProgramId）检查当前项目是否已存在
  const isExist = selectedProgramList.some(program => program.ProgramId === ppTermDetails.ProgramId);

  if (isExist) { 
    console.log("Already Exist"); 
  } else { 
    // 3. 不存在就追加进去，然后存回LocalStorage
    selectedProgramList.push(ppTermDetails);
    localStorage.setItem('selectedPrograms', JSON.stringify(selectedProgramList));
  }

  // 可选：打印当前存储的列表，方便调试
  console.log("Final Selected Programs List : >>>> ", selectedProgramList); 
}

代码细节解释： #

• LocalStorage读写逻辑：每次函数执行时先从localStorage.getItem('selectedPrograms')读取数据，用JSON.parse转成数组；如果LocalStorage里还没有这个键，就用|| []初始化一个空数组。
• 重复判断核心：用Array.some()遍历数组，对比每个项目的ProgramId和当前点击项目的ProgramId——这个是确保同一个项目不重复添加的关键，换成你实际项目的唯一标识字段也可以（比如schoolId）。
• 持久化更新：当项目不存在时，把它push到数组里，再用JSON.stringify转成字符串，通过localStorage.setItem存回LocalStorage，这样会话刷新后数据也不会丢失。

额外小提示： #

• 可以给LocalStorage的键起个更语义化的名字，比如userSelectedCollegePrograms，避免和其他页面的存储键冲突。
• 极端情况下LocalStorage可能存储失败（比如浏览器存储空间满了），如果需要严谨处理，可以给setItem加个try-catch块捕获异常。

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