reactjs如何将数据存储在localStorage中

Question

我正在尝试设置两种类型的用户，即管理员用户和匿名用户，并且我正在尝试将它们存储在 localStorage 中。所以在这里，我是如何定义账户的：

const [defaultAccount, setDefaultAccount] = useState(null, () => {
        const localData = localStorage.getItem('userType');
        return localData ? JSON.parse(localData) : [];
    });

下面是我区分管理员和匿名的方式：

useEffect(() => {
    if (defaultAccount === '') {
        localStorage.setItem('userType', 'admin')
        setConnButtonText('Wallet Connected');
    } else if (defaultAccount === '') {
        localStorage.setItem('userType', 'nonexist')
    } else {
        localStorage.setItem('userType', 'anonymous')
        setConnButtonText('Wallet Connected');
    }
}, [defaultAccount])

但是我刷新页面后，即使我是管理员，它又是匿名的。我怎样才能解决这个问题？因此，总而言之，我单击按钮并获取 defaultAccount 并将 userType 存储为管理员。但后来我刷新页面，它又变成匿名的了。我想要实现的目标是，在单击按钮之前，userType 应该为空，之后，它应该是 admin 或 anonymous。刷新页面后，由于保存在localStorage中，所以userType不应该改变。

Answer 1

您的代码始终将 defaultAccount 的初始值设置为 null

Answer 2

您需要决定 userType 将持有什么。有几个问题：

useState 要么接受一个初始值，要么接受一个计算初始值的函数。你两个都超过了。
在初始值函数上，localStorage.getItem('userType') 看起来像 returns 一个 JSON 对象（你是 JSON.parse），而你是 setItem('userType', 'some string')
useEffect 接受一个数组的依赖关系，你只传递字符串 defaultAccount
我不完全理解 useEffect 的作用：defaultAccount 来自 userType，但随后它在本地存储 中设置了 userType ]仅至"admin"或"anonymous"

也许您想要做的是：

const [defaultAccount, setDefaultAccount] = useState(() =>
  localStorage.getItem('userType') === 'admin' ? 'dgdsgd' : ''
)

useEffect(() => {
  if (defaultAccount === 'dgdsgd') {
    localStorage.setItem('userType', 'admin')
  } else {
    localStorage.setItem('userType', 'anonymous')
  }
}, [defaultAccount])

reactjs如何将数据存储在localStorage中

How to store data in localStorage in reactjs

reactjs

react-hooks

rxjs

local-storage