如何将数据存储在reactjs中的localstorage中

发布于 2025-02-03 08:01:59 字数 911 浏览 4 评论 0原文

我正在尝试设置管理和匿名的两种用户，我正在尝试将其存储在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应该为空，之后应为管理或匿名。刷新页面后，由于将其存储在LocalStorage中，因此不应更改IT USERTYPE。

原文

I am trying to set up 2 types of users which are admin and anonymous and I am trying to store them in localStorage. So here, how I defined the account:

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

And here is how I differentiate between admin and anonymous:

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])

But after I refreshed the page, even though I am an admin, it comes anonymous again. How can I fix this? So, to sum up, I click the button and get defaultAccount and I store userType as an admin. But then I refresh the page and it comes anonymous again. What I am trying to achieve, before the button is clicked, userType should be empty and after, it should be admin or anonymous. After refreshing the page, since it is stored in localStorage, it userType shouldnt be changed.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

玩世 2025-02-10 08:01:59

您需要确定USERTYPE将保留什么。有一些问题：

usestate 具有初始值，或者将评估初始值的函数。你们两个都通过。
在初始值函数上，localstorage.getItem（'usertype'）似乎它返回一个JSON对象（您做JSON.PARSE），而您却是setTiTem（'usertype'，'一些字符串'）
useseffect在依赖关系的 array 中，您只是在字符串defaultAccount中传递，
我不完全理解使用的内容是：defaultAccount来自usertype，但随后在本地存储中设置usertype只有 to “ admin”或“匿名”

也许您想做的是：

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

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

You need to decide what userType will hold. There's a few issues:

useState either takes in an initial value, or a function that will evaluate the initial value. You are passing them both.
On the initial value function, localStorage.getItem('userType') seems like it returns a JSON object (you do JSON.parse), whereas you are setItem('userType', 'some string')
useEffect takes in an array of dependencies, you are passing in just the string defaultAccount
I don't fully understand what that useEffect does: defaultAccount comes from userType, but then it sets userType in the local storage only to "admin" or "anonymous"

Maybe something you're looking to do is something like:

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

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

回复收藏 0 原文