React JS | Store form data in localStorage

 Register.jsx

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';

export default function Register() {
  const [user, setUser] = useState({
    name: "",
    email: "",
    password: ""
  });

  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();

    const formData = {
      name: user.name,
      email: user.email,
      password: user.password
    };

    localStorage.setItem("userData", JSON.stringify(formData));
    navigate("/login");
  }

  return (
    <>
      <section className='container w-25'>
        <div className="card my-5">
          <div className="card-header">
            <h5 className='text-center my-3'>Register</h5>
          </div>
          <div className="card-body">
            <form onSubmit={handleSubmit}>
              <div className="row">
                <div className="col-md-12 mt-3">
                  <div className="mb-3">
                    <label className='form-label'>Name</label>
                    <input
                      type="text"
                      className='form-control'
                      onChange={(e) => setUser({ ...user, name: e.target.value })}
                    />
                  </div>
                </div>
                <div className="col-md-12 mt-3">
                  <div className="mb-3">
                    <label className='form-label'>Email</label>
                    <input
                      type="email"
                      className='form-control'
                      onChange={(e) => setUser({ ...user, email: e.target.value })}
                    />
                  </div>
                </div>
                <div className="col-md-12 mt-3">
                  <div className="mb-3">
                    <label className='form-label'>Password</label>
                    <input
                      type="password"
                      className='form-control'
                      onChange={(e) => setUser({ ...user, password: e.target.value })}
                    />
                  </div>
                </div>
              </div>
              <hr />
              <div className='text-center my-3'>
                <button type='submit' className='btn btn-primary'>Register</button>
              </div>
              <div className='text-center'>
                Already have an account?
                <span>
                  <Link to="/login">Login</Link>
                </span>
              </div>
            </form>
          </div>
        </div>
      </section>
    </>
  )
}

Login.jsx

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';

export default function Login() {
  const [user, setUser] = useState({
    email: "",
    password: ""
  });

  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();

    const storedUserData = JSON.parse(localStorage.getItem("userData"));

    if (storedUserData && storedUserData.email === user.email && storedUserData.password === user.password) {
      navigate("/dashboard");
      window.location.reload();
    } else {
      alert("Invalid email or password");
    }
  };

  return (
    <>
      <section className='container w-25'>
        <div className="card my-5">
          <div className="card-header">
            <h5 className='text-center my-3'>Login</h5>
          </div>
          <div className="card-body">
            <form onSubmit={handleSubmit}>
              <div className="row">
                <div className="col-md-12 mt-3">
                  <div className="mb-3">
                    <label className='form-label'>Email</label>
                    <input
                      type="email"
                      className='form-control'
                      onChange={(e) => setUser({ ...user, email: e.target.value })}
                      value={user.email}
                    />
                  </div>
                </div>
                <div className="col-md-12 mt-3">
                  <div className="mb-3">
                    <label className='form-label'>Password</label>
                    <input
                      type="password"
                      className='form-control'
                      onChange={(e) => setUser({ ...user, password: e.target.value })}
                      value={user.password}
                    />
                  </div>
                </div>
              </div>
              <hr />
              <div className='text-center my-3'>
                <button type='submit' className='btn btn-primary'>Login</button>
              </div>
              <div className='text-center'>
                Don't have an account?
                <span>
                  <Link to="/register">Register</Link>
                </span>
              </div>
            </form>
          </div>
        </div>
      </section>
    </>
  );
}


Comments

Post a Comment

Popular posts from this blog

Create a Connection in Node js and make an API

server.js import express from "express" ; import mongoose from "mongoose" ; import bodyParser from "body-parser" ; import dotenv from 'dotenv' ; import router from "./routes/index.js" ; import cors from "cors" ; dotenv . config (); const app = express (); app . use ( cors ({     origin : '*' , })) app . use ( bodyParser . json ()); app . use ( express . static ( 'public' )); app . use ( '/media' , express . static ( 'media' )); mongoose . connect ( process . env . MONGO_URI , {     useNewUrlParser : true ,     useUnifiedTopology : true , }). then (() => {     console . log ( 'Connected to MongoDB' ); }). catch (( error ) => {     console . error ( 'MongoDB connection error:' , error ); }); app . use ( '/api' , router ); app . get ( '/' , ( req , res ) => {     res . send ( 'Hello, API!' ); }); const PORT = process . env . ...
Read more

React Redux Toolkit

  1. Install Redux Toolkit and React-Redux: npm install @reduxjs/toolkit react-redux 2. Create a Redux Store: import { configureStore } from "@reduxjs/toolkit" ; import counterReducer from "./slices/counterSlice" ; // Import your slice export const store = configureStore ({   reducer : {     counter : counterReducer , // Add your reducers here   }, }); export default store ; 3. Create a Slice:  import { createSlice } from "@reduxjs/toolkit" ; const initialState = {   count : 0 , }; const counterSlice = createSlice ({   name : "counter" ,   initialState ,   reducers : {     increment : ( state ) => {       state . count += 1 ;     },     decrement : ( state ) => {       state . count -= 1 ;     },     incrementByAmount : ( state , action ) => {       state . count += action . payload ;  ...
Read more