访问另一个 React 组件中的本地存储值答案

【问题标题】：Access local storage value in another React component访问另一个 React 组件中的本地存储值
【发布时间】：2021-09-26 19:00:26
【问题描述】：

我有一个登录组件，它使用电子邮件和密码对 Ruby API 进行 API 调用，如果凭据正确，则设置 isLoggedIn = true。如果这是真的，导航栏会显示“注销”链接，并在false 时显示登录/注销。但是，问题是它只有在没有重新加载页面时才能正常工作，因为我没有将会话存储在任何地方。

登录成功后，我正在尝试在本地存储中设置登录状态。它在登录组件中工作正常，但当我尝试读取其他组件中的本地存储值时却不行。我认为这是因为我没有将它存储在共享状态。是否可以将值存储在状态中？

        axios
        .post(apiUrl, {
          user: {
            email: email,
            password: password,
          },
        })
        .then((response) => {
          if ((response.statusText = "ok")) {
            setLoginStatus({ props.loginState.isLoggedIn: true });
           
           localStorage.setItem('props.loginState.isLoggedIn', true);
            console.log(response)
            history.push("/");
          }
        })

App.js

let data = {
    isLoggedIn: false,
    user: {},
    setSession:null
  };

  const [loginState, setLoginStatus] = useState(data);
  const rememberMe = localStorage.getItem('loginState.isLoggedIn')

当我在 App.js 或 Nav.js 中使用控制台日志时，值始终为 null。

localStorage.getItem('props.loginState.isLoggedIn');

【问题讨论】：

@TusharShahi 如果你在 App.js 中看到这就是我所做的
你这样做了吗： const rememberMe = localStorage.getItem('props.loginState.isLoggedIn');在 App.js 中？
@TusharShahi 为什么要在父组件中使用道具？
因为 localStorage 的项目被保存为键值对。这是一个字符串 - 'props.loginState.isLoggedIn'。它可能是“xaxax”或“manana”。由于您使用该键名保存它，因此只能使用该键名访问它。
@TusharShahi 工作，谢谢。

标签： javascript reactjs ecmascript-6

【解决方案1】：

localStorage 项目保存为键值对。这是一个字符串'props.loginState.isLoggedIn'，可以从任何组件以相同的方式访问。由于您使用该键名保存它，因此只能从任何组件使用该键名访问它。

【讨论】：