javascript localstorage for login[reactjs]

qxsslcnc 于 2023-04-28 发布在 Java

关注(0)|答案(2)|浏览(68)

我有一个按钮，当点击时，应该说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;

JavaScript

来源：https://stackoverflow.com/questions/76114127/localstorage-for-loginreactjs

2条答案

按热度按时间

6qftjkof1#

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

赞(0）回复(0）举报 2023-04-28

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;

赞(0）回复(0）举报 2023-04-28

我来回答

javascript localstorage for login[reactjs]

2条答案

相关问题

热门标签

最新问答