Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

647
Views
How to implement a remember me function using React JS

I am trying to username is set to remember me functionality but I don't have any idea how to set remember me functionality, using local storage below is my code please check it and let me know if any suggestions I have used Local Storage. I am new to React JS.

Below is my code, please give me solutions.

const Login = () => {
  const navigate = useNavigate(); //navigate to next step
  const [items, setItems] = useState(); //variable for store api response
  const [error, setError] = useState({ type: '', message: '' })//res type and res Error show with loop
  const rmCheck = document.getElementById("rememberMe");
  const username = document.getElementById("username");//remember me variable
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm(); //form Input using useform
  const onSubmit = (data) => {
    console.log(items);
    axios.post(`https://lt-hrm.herokuapp.com/api/v1/2022/user/login`, data)
      .then((res) => {
        setItems(res);
        console.log(res);
        localStorage.setItem('username',JSON.stringify(res.data.username));
        localStorage.setItems("token", JSON.stringify(res.data.token));
        if (res.status === 200 || res.message === 'Login Succesful') {
          setError({type:'success',message:`${res.data.message}`})
          const timeout = setTimeout(() => {
             navigate("/campaign-details")
          }, 2000);
          return () => clearTimeout(timeout);
        }
        else if (res.status === 201 || res.statusText === "Created") {
          setError({ message: `${res.data.message}` })
          const timeout = setTimeout(() => {
           setError({type:'error' , message:""})
          }, 2000);
          return () => clearTimeout(timeout);
        }
        else {
        }
        // if (localStorage.checkbox && localStorage.checkbox !== "") {
        //   rmCheck.setAttribute("checked", "checked");
        //   username.value = localStorage.username;
        // } else {
        //   rmCheck.removeAttribute("checked");
        //   username.value = "";
        // }
        reset();
      });
  }; //fuction for form submit 
function RememberMe() {
  console.log('hii');
  // if (rmCheck.checked && username.value !== "") {
  //   localStorage.username = username.value;
  //   localStorage.checkbox = rmCheck.value;
  // } else {
  //   localStorage.username = "";
  //   localStorage.checkbox = "";
  // }
}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!