更新 localStorage 中的单个对象答案

【问题标题】：Update single object in localStorage更新 localStorage 中的单个对象
【发布时间】：2021-11-25 03:07:48
【问题描述】：

我想更新本地存储中的单个对象。我做了一个详细页面，我可以在其中提交新值（进度和值）当我想更新值时，它会更改两个对象中的值。如何只更改一个对象。

这是我的部署链接。（正在进行中） https://mastery-app.herokuapp.com/

这是我的 localStorage 数组：

skills[
    {
        "title": "Sewing",
        "imageSrc": "images.unsplash.com",
        "description": "Make your own clothes",
        "category": "crafting",
        "progress": 500,
        "isDone": false,
        "rank": 0,
        "value": 0
    },
    {
        "title": "Crocheting",
        "imageSrc": "images.unsplash.com",
        "description": "Interlock loops of yarn",
        "category": "crafting",
        "progress": 500,
        "isDone": false,
        "rank": 0,
        "value": 0
    }
]

这就是我更新 localStorage 的方式：

const update = skills.map((skills) => {
    skills.title === skills.title;
    const updateProgress = skills.progress - value;
    const rankNumber = parseInt(ranking);
    const updateRank = skills.rank + rankNumber;
    console.log(updateRank);
    const updateValue = skills.value + value;

    return {
      title: skills.title,
      rank: updateRank,
      description: skills.description,
      progress: updateProgress.toFixed(1),
      imageSrc: skills.imageSrc,
      category: skills.category,
      isDone: false,
      value: updateValue,
    };
  });
  localStorage.setItem('skills', JSON.stringify(update));

【问题讨论】：

我想更新我的 localStorage 中的单个对象。 localStorage 包含字符串，而不是对象。
在 JSON.parse(localStorage.getItem("skills"))[0].title = "new title" 在此示例中这是按索引编辑单个数组项的方法 0 是索引
你的意思是做一个过滤器吗？
我想在另一个页面上使用更新后的数组。这是我的部署链接：mastery-app.herokuapp.com你可以在详情页添加技能和更改值

标签： javascript typescript local-storage

【解决方案1】：

您可以考虑使用find 方法来查找您要更新的对象。 map 不是用于您的用例的正确函数。 skills.title === skills.title; 也完全没有效果（也许您想使用 if 语句通过使用 title 进行某种过滤，但总是会返回 true）。请删除它。

现在，我不知道您将使用哪个字段来搜索要更新的对象，但它必须是唯一的。如果对象中的所有字段都不是唯一的，则应考虑在技能对象中添加唯一的 id 字段。但如果标题是唯一的，您可以使用标题进行搜索。然后你可以做类似下面的伪代码：

const toUpdate = skills.find(skill => skill.title === your_title_here)

toUpdate.field_to_update_1 = some_value_1
toUpdate.field_to_update_2 = some_value_2

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

还请查看 MDN 文档以了解 map、find 和其他数组方法的工作原理以及它们的一些用例。

【讨论】：