如何更新属于浏览器本地存储的特定 json 数据 object

Question

这是浏览器本地存储 Object 称为数据集

let dataset = localStorage.getItem('dataset') !== null ? leech : [];

   [
      {
        "id": 123,
        "name": "abc"
      },
      {
        "id": 456,
        "name": "bcd"
      }
    ]

这是可用的初始数据 object 我想向特定 ID 添加更多字段。 这就是我要的：

[
  {
    "id": 123,
    "name": "abc"
  },
  {
    "id": 456,
    "name": "bcd",
    "status":1
  }
]

这是我查找特定ID的代码

const user = dataset.find(user => user.id == 456);

现在如何向用户添加状态并更新数据集中的用户？

Answer 1

您已经使用Array.prototype.find()找到了用户，因此您需要做的就是添加status属性

 // const dataset = JSON.parse(localStorage.getItem("dataset")) const dataset = [{"id":123,"name":"abc"},{"id":456,"name":"bcd"}] const user = dataset.find(({ id }) => id === 456) if (user) { user.status = 1 } console.info(dataset)

 .as-console-wrapper { max-height: 100% !important }

如果您想将修改后的数据存储回localStorage ，请使用localStorage.setItem()和JSON.stringify()

localStorage.setItem("dataset", JSON.stringify(dataset))

Answer 2

如果你想保持dataset的初始值，并且想得到一个新的数组，你可以使用Array.reduce()方法。

 const dataset = [ { "id": 123, "name": "abc" }, { "id": 456, "name": "bcd" } ] const output = dataset.reduce((acc, cur) => { if (cur.id === 456) cur.status = 1; acc.push(cur); return acc; }, []); console.log(output);

如果要更新dataset ，可以使用Array.forEach()方法。

 const dataset = [ { "id": 123, "name": "abc" }, { "id": 456, "name": "bcd" } ] dataset.forEach(user => { if (user.id === 456) user.status = 1; }); console.log(dataset);

Answer 3

您可以使用带有回调返回 function 的Array#Findindex Findindex。 所以可以传递originaldata,searchId and update object 。 在这种方法中，您可以轻松更新 object

为什么我建议 findIndex

因为findindex没有运行整个循环或迭代。 如果在第一次迭代中检测到匹配，它们将中断循环并返回结果。对于长时间迭代，它比其他循环更快（reduce，forEach）

 const data = [ { "id": 123, "name": "abc" }, { "id": 456, "name": "bcd" } ] function update(dataset,searchId,addtionObject){ let ind = dataset.findIndex(({id}) => id == searchId); dataset[ind] = {...dataset[ind],...addtionObject}; //join the new and old array return dataset } console.log(update(data,456,{status:1}))

Answer 4

如果您想创建新的 state 对象，您可以使用 immer。 Immer将根据草案 state 的突变生成 nextState。

import produce from "immer";

const baseState = [
  {
    id: 123,
    name: "abc",
  },
  {
    id: 456,
    name: "bcd",
  },
];

const nextState = produce(baseState, (draftState) => {
  draftState[1].status = 1;
});