如何在 reactjs 中更新本地存储的特定元素答案

【问题标题】：How to update particular element of local storage in reactjs如何在 reactjs 中更新本地存储的特定元素
【发布时间】：2021-12-27 11:37:59
【问题描述】：

我目前将 accessToken 和用户信息存储在本地存储中，即“userInfo”

token 将存储在 userInfo.token 中，而 userIno 将存储在 userInfo.info 中

我想更新userInfo里面的token，也想保持userInfo.info不变，有什么办法吗？

目前我正在使用此代码：

localstorage.setItem('userInfo', data.token)

但它正在删除 userInfo.info

userInfo 结构：

{"token": eykjdbvksbkvsbks89all, "userinfo": {"email": veera@gmai.com} }

【问题讨论】：

1. localStorage 不能存储对象，只能存储字符串，而且我没有看到任何序列化代码。 2. 您不能使用其 API 修改 localStorage 中的嵌套对象（部分原因是您无法存储对象，请参见 #1）。如果要存储复杂数据，则需要将其存储为字符串，例如使用 JSON 解析/字符串化。你read the documentation了吗？
您可以 JSON.stringify() 对象并将其存储在本地存储中，当您更新其属性时获取字符串对象并解析为 JSON 并修改和设置新值
@RezaGhorbani 是的。小挑剔：我认为您的意思是“解析 from JSON”。您还可以添加，然后 OP 需要在结果上再次使用JSON.stringify，然后再将其放回localStorage。那将是一个很好的答案！
能否提供代码，谢谢

标签： javascript reactjs react-redux

【解决方案1】：

您需要更新 localStorage 中的整个 user 对象。

例子：

const user = {"token": "adkadjhk2h3hkhkhkh", "userinfo": {"email": ":veera@gmai.com" } };

localStorage.setItem('userInfo', JSON.stringify(user))

const userInfo = JSON.parse(localStorage.getItem('userInfo'));

const newUpdatedUserInfo = {
  ...userInfo,
  "token": "new-token-adkadjhk2h3hkhkhkh"
};

localStorage.setItem('userInfo', JSON.stringify(newUpdatedUserInfo))

【讨论】：

【解决方案2】：

试试这个代码示例：

 localStorage.setItem('userInfo',JSON.stringify({name:'reza',age:20}));
    const data = window.localStorage.getItem('userInfo')
    const newData = JSON.parse(data)
    localStorage.setItem('userInfo',JSON.stringify({...newData,age:44}))

【讨论】：

【解决方案3】：

const userInfo = window.localStorage.getItem('userInfo')
const parsedUserInfo = JSON.parse(userInfo)
localStorage.setItem('userInfo', JSON.stringify({...parsedUserInfo,token: data.token }))

你可以试试这个sn-p。

【讨论】：