Local storage in ReactJS

Before starting and going into practical project on LocalStorage, Let's discuss about what is local storage and why we need to use this in ReactJS for web development

LocalStorage is a local web storage object to store the data on the user’s computer locally or you can say the local storage is used to store temporary into the browser memory which means the stored data will be saved across browser sessions so that we can use that data in future like we do in todo list app which run in mobile which also using React and the data stored has no expiration time until you delete that data.

in this post, I’ll create a custom hook to use LocaleStorage with ReactJS.

I will create a simple example to read and write data into local storage using reactjs.

and while going through my post if you found it difficult to understand or you have any doubts then contact me on any social media and to watch on this particular topic. So Let's start

Here i will take Name, Email and Password from user and then save it to local storage and then retrieve that data from local storage.

let's create simple form which consists of 3 fields which are Name, Email and Password and a button for submit our data to local 

Note: It is not necessary to use button to save data in local but when you creating form then its looks great if you provide a button which will help user to save their data to local storage of browser

When user fill his name, email and password in input filed of form then after click on button the data will be stored locally on browser

Now we need to retrieve that data from localStorage and here i am showing that data below the form 

Now let's Go to Code

import React, { useEffect } from "react";

import { useState } from "react";

import './App.css'

export default function App(){

  const[name,setName]=useState("")

  const[email,setEmail]=useState("")

  const[pswd,setPswd]=useState("")

const handle=()=>{

  localStorage.setItem("name",name)

  localStorage.setItem("email",email)

  localStorage.setItem("password",pswd)

}

  return(

    <div className="form">

      <input type="name" placeholder="Enter your Name" onChange={(e)=>setName(e.target.value)} />

     

      <input type="email" placeholder="Email or Phone number" onChange={(e)=>setEmail(e.target.value)}/>

     

      <input type="password" placeholder="Enter your password" onChange={(e)=>setPswd(e.target.value)} />

     

      <button onClick={handle} >Click Me</button>

      <div>

      <div>{localStorage.getItem("name")}</div>

      <div>{localStorage.getItem("email")}</div>

      <div>{localStorage.getItem("password")}</div>

      </div>

    </div>

   

  )

}

• Using useState to save input value in variable which will used to transfer that value to storage
• Creating a function named (handle) so that after click on button this function will be run and into this function we are saving input data from user to local storage with the help of localStorage.setItem("name",name") where localStorage is predefined keyword and setItem with this is also predefined

which have two parameter where first one is key and second one is value and
here i am giving value to this form user input using state. 

and the Last after button localStorage.getItem("name") This will used to retrieve data from local storage with consist of one argument which is

the key which we already defined while saving the data.

Thank You Coder...