javascript localstorage for login[reactjs]

qxsslcnc  于 2023-04-28  发布在  Java
关注(0)|答案(2)|浏览(80)

我有一个按钮,当点击时,应该说WELCOME USER。此外,我想在localStorage中存储用户是否单击了按钮,以便在随后的页面加载中可以知道他们是否单击了按钮。如果用户 * 还没有 * 点击按钮,并且没有在本地存储中设置值,我们应该 * 不 * 显示文本WELCOME USER

import { useState } from "react";

function App(){
  let [isLogin,setIsLoging] = useState(false)
  localStorage.setItem("isLogin",false)

  if (localStorage.getItem("isLogin") == "true") {
    return (
      <>
        <h1>Welcome user</h1>
      </>
    );
  } else {
    return (
      <>
        <button onClick={login}>login</button>
      </>
    );
  }

  function login(){
    setIsLoging(isLogin = true)
    localStorage.setItem("isLogin", true)
  }
}
 
export default App;
6qftjkof

6qftjkof1#

你说useState的setter是错误的。应该是setIsLogin(true)。此外,您还在每个渲染周期开始时将值设置为false,因此它永远不会为true。..您应该将对localStorage的调用放入useEffect中,而不是在每次重新渲染时都这样做。

6ss1mwsb

6ss1mwsb2#

编辑:我错过了你不想抱歉尝试这个

import { useState } from "react";

function App() {
  const [isLogin, setIsLoging] = useState(localStorage.isLogin ? true : false);
  return (
    <>
      {isLogin ? (
        <h1>Welcome User </h1>
      ) : (
        <button onClick={login}>login</button>
      )}
    </>
  );
  function login() {
    setIsLoging(true);
    if(!localStorage.isLogin)
      localStorage.isLogin = true;
  }
}
export default App;

相关问题