时间戳

首页 > 解决方案 > React - 从本地存储中获取项目

reactjs - React - 从本地存储中获取项目

问题描述

我是 React 的新手，正在尝试建立一个基本的客户端会话。当我尝试从本地存储中检索用户名时出现错误。SyntaxError: Unexpected token p in JSON at position 0你对修复它有什么建议吗？

导航栏.js

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

const NavBar = props => {
  if (props.isAuth !== null) {
    return <div>
        ## here I am trying to display the username
        <p>Logged In as {{username}}</p>

    </div>;
  } else {
    return <span>Not logged in</span>;
  }
};
export default NavBar;

应用程序.js

function App() {
  const [loggedIn, setLoggedIn] = useState(localStorage.getItem("token"));
  return (
    <div>
      <Router>
        <Navbar isAuth={loggedIn} />
      </Router>
      <div>
        <button
          onClick={() => {
            if (loggedIn) {
              localStorage.removeItem("token", null);
              setLoggedIn(null);
            } else {
              localStorage.setItem("token", true);
              localStorage.setItem("username", "pierre-alex");
              setLoggedIn(true);
            }
          }}
          value="toggle"
        >
          Toggle
        </button>
      </div>
    </div>
  );
}

export default App;

谢谢你

标签： reactjs

解决方案

如果 的值username是一个对象，那么我们需要在将其存储在 localStorage 时对其进行字符串化。然后我们可以解析它以获取数据。

localStorage.setItem('username',JSON.stringify({name:'Jonh Doe'}));
const username = JSON.parse(localStorage.getItem('username');

如果存储在 localStorage 中的值不是对象，那么我们不需要解析它。我们可以像下面这样访问它。

const username = localStorage.getItem('username')

推荐阅读