React and LocalStorage

Question

I am trying this code where I can send some data and save it in the localstorage. I tied the below code.

function Login () { const uname=useRef() const pass = useRef() const getEmail = localStorage.getItem("emailData") const getPassword = localStorage.getItem("passwordData") const handleSubmit=()=>{ if(uname.current.value==="admin"&&pass.current.value==="admin"){ localStorage.setItem("emailData","admin") localStorage.setItem("passwordData","admin") } } const [values, setValues] = useState({ email: "", pass: "", showPass: false, }); const handlePassVisibilty = () => { setValues({ ...values, showPass: !values.showPass, }); }; return ( <div> { getEmail&&getPassword?<Home/>: <Container maxWidth="sm"> <Grid container spacing={2} direction="column" justifyContent="center" style={{ minHeight: "100vh" }} > <Paper elelvation={2} sx={{ padding: 10 }}> <h2>Welcome to Employee Management System</h2> <form onSubmit={handleSubmit}> <Grid container direction="column" spacing={2}> <Grid item> <TextField type="text" fullWidth label="Enter your Username" placeholder="Username" variant="outlined" required ref={uname} /> </Grid> <Grid item> <TextField type={values.showPass ? "text" : "password"} fullWidth label="Enter your Password" placeholder="Password" variant="outlined" required ref={pass} InputProps={{ endAdornment: ( <InputAdornment position="end"> <IconButton onClick={handlePassVisibilty} aria-label="toggle password" edge="end" > {values.showPass ? ( <VisibilityOffIcon /> ) : ( <VisibilityIcon /> )} </IconButton> </InputAdornment> ), }} /> </Grid> <Grid item> <Button type="submit" fullWidth variant="contained" > Sign In </Button> </Grid> </Grid> </form> </Paper> </Grid> </Container> } </div> ); }; export default Login;

What I am trying to do is that if the localstorage has the correct username and password the login page will redirect to the home page. The problem I am facing is that the data is not stored in the localstorage. Can someone please explain to me what I am doing wrong? Any help is appreciated Thank you.

Any reason why you store passwords (unencrypted) in localstorage? — node_modules
– node_modules, Commented Dec 13, 2022 at 16:57
@rrrrTTTyyy As long it's not going to production and for educational purposes only. This method implementing a login system is wrong and any session logic (checking passwords, creating sessions etc.) should happen on the backend. — node_modules
– node_modules, Commented Dec 13, 2022 at 17:00

Ali Sattarzadeh · Accepted Answer · 2022-12-13 17:24:51Z

you need to give type="submit" to button of your form in order to submit form

 <Button fullWidth type="submit" variant="contained"> Sign In </Button>

if it still not working, use state instead

here what I did with your code :

 const getEmail = localStorage.getItem("emailData") const getPassword = localStorage.getItem("passwordData") const [values, setValues] = useState({ email: "", pass: "", showPass: false, }); const handleSubmit=()=>{ if(values.email ==="admin" && values.pass ==="admin"){ localStorage.setItem("emailData","admin") localStorage.setItem("passwordData","admin") } } const handlePassVisibilty = () => { setValues({ ...values, showPass: !values.showPass, }); }; return ( <div> { getEmail&&getPassword?<Home/>: <Container maxWidth="sm"> <Grid container spacing={2} direction="column" justifyContent="center" style={{ minHeight: "100vh" }} > <Paper elelvation={2} sx={{ padding: 10 }}> <h2>Welcome to Employee Management System</h2> <form onSubmit={handleSubmit}> <Grid container direction="column" spacing={2}> <Grid item> <TextField type="text" fullWidth label="Enter your Username" placeholder="Username" variant="outlined" required value={values.email} onChange={(e)=>{ setValues(prevState=>({...prevState,email:e.target.value})) }} /> </Grid> <Grid item> <TextField type={values.showPass ? "text" : "password"} fullWidth label="Enter your Password" placeholder="Password" variant="outlined" required value={values.pass} onChange={(e)=>{ setValues(prevState=>({...prevState,pass:e.target.value})) }} InputProps={{ endAdornment: ( <InputAdornment position="end"> <IconButton onClick={handlePassVisibilty} aria-label="toggle password" edge="end" > {values.showPass ? ( <VisibilityOffIcon /> ) : ( <VisibilityIcon /> )} </IconButton> </InputAdornment> ), }} /> </Grid> <Grid item> <Button type="submit" fullWidth variant="contained" > Sign In </Button> </Grid> </Grid> </form> </Paper> </Grid> </Container> } </div> );

Yes I forgot to do that now the form is getting submitted but the localstorage is empty

Collectives™ on Stack Overflow

React and LocalStorage

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related