如何更新localStorage数组中的单个对象 避免修改所有元素

问题根因 #

你现有代码出现全数组对象被修改的核心原因有2个：

• 遍历回调的参数名和外层skills数组重名，导致你写的匹配判断skills.title === skills.title永远成立，等于没有做任何匹配过滤，所有数组项都会被执行更新逻辑
• 没有指定要更新的目标项的唯一标识，无法区分需要修改的单个对象

修正方案 #

你可以用技能的title作为唯一匹配标识（确保title不会重复的前提下），只对匹配的目标项做修改，其余项原样返回即可，修正后代码如下：

// 先从详情页获取要更新的目标技能的title，比如从路由参数、当前打开的详情数据中取值
const targetTitle = "Sewing" // 替换为你实际获取的目标title值

const updatedSkills = skills.map(item => {
  // 仅修改title匹配的单个项
  if (item.title === targetTitle) {
    const updateProgress = item.progress - value
    const rankNumber = parseInt(ranking)
    const updateRank = item.rank + rankNumber
    const updateValue = item.value + value
    return {
      ...item, // 解构原有字段，避免手动重复写字段的冗余代码
      rank: updateRank,
      progress: updateProgress.toFixed(1),
      value: updateValue
    }
  }
  // 不匹配的项直接返回，不做任何修改
  return item
})

localStorage.setItem('skills', JSON.stringify(updatedSkills))

优化建议 #

• 后续建议给每个技能新增唯一id字段作为匹配标识，比title更可靠，避免出现重名技能时更新出错
• 可以在更新前新增目标项存在性判断，避免无效操作：

const isTargetExist = skills.some(item => item.title === targetTitle)
if (!isTargetExist) {
  console.log('未找到对应待更新的技能项')
  return
}

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