Breaking News: Grepper is joining You.com. Read the official announcement!

in reactjs remember me function for login page

Shoukath ali answered on September 16, 2023 Popularity 5/10 Helpfulness 4/10

answer in reactjs remember me function for login page

in reactjs remember me function for login page

Comment

import React, { useState, useEffect } from 'react';

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [rememberMe, setRememberMe] = useState(false);

  useEffect(() => {
    // Check if there's a "rememberMe" flag in local storage
    const storedRememberMe = localStorage.getItem('rememberMe');
    
    if (storedRememberMe) {
      // If it exists, set the state accordingly
      setRememberMe(JSON.parse(storedRememberMe));
    }
  }, []);

  const handleLogin = () => {
    // Perform your login logic here
    
    if (rememberMe) {
      // If "Remember Me" is checked, store the flag in local storage
      localStorage.setItem('rememberMe', JSON.stringify(rememberMe));
    } else {
      // If "Remember Me" is unchecked, remove the flag from local storage
      localStorage.removeItem('rememberMe');
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <label>
        <input
          type="checkbox"
          checked={rememberMe}
          onChange={() => setRememberMe(!rememberMe)}
        />
        Remember Me
      </label>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

export default Login;

Popularity 5/10 Helpfulness 4/10 Language javascript

Source: chat.openai.com

Tags: function javascript login-page reactjs remember-me

Link to this answer
Share Copy Link

Contributed on Sep 16 2023

Shoukath ali

0 Answers Avg Quality 2/10

in reactjs remember me function for login page

Contents

More Related Answers

in reactjs remember me function for login page

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.