How to store form data in local storage using reactjs

Share the post

Hello All, In this React JS tutorial, We will discuss How to store form data in local storage using reactjs. In the last react js tutorial, We discussed How to redirect from one page to another page in reactjs.

In this react js tutorial, we will store the state data in local storage on submit button click & get it back on the getdata button click. We will store the username & password of the user in the local storage & get the data with a single click. after reading this react js tutorial, you will learn How to store form data in local storage using reactjs.

So, let’s start…

Table of Contents

Steps required to learn How to store form data in local storage using reactjs

Create a new react project
Create a new form component
Write set & get methods to store & retrieve data
Update App.js
Run the application

Step 1: Create a new React Project

We need to create a new React Project. Use the below command to create a new project in React JS

npx create-react-app myapp

Now, go to our project path

cd myapp

We will open this project in Visual Studio Code editor using the below command.

code .

Step 2: Create a new form component

In the new form.js file we will create form data that contains username & password as input fields. Also, It will contain two buttons. one is for submitting the data & second button is to get the data. submit button will handle the logic to store data in local storage whereas get data button handles the logic to get the data from local storage.

return (
        <>
            <div>
                <h1>How to store form data in local storage using reactjs</h1>

                <div>
                    <form onSubmit={onSubmit}>
                        <div>
                            <label>Username</label>
                            <input type="text" value={username} onChange={onChangeUsername} />
                        </div>
                        <div>
                            <label>Password</label>
                            <input type="password" value={password} onChange={onChangePassword} />
                        </div>
                        <button type="submit">Submit</button>
                        <button type="button" onClick={getData}>Get Data</button>
                    </form>
                </div>
            </div>
        </>
    );

Step 3: Write set & get methods to store & retrieve data

We will write on the change method for both the input fields to update the values.

 function onChangeUsername(e) {
        setUsername(e.target.value)
    }
    function onChangePassword(e) {
        setPassword(e.target.value)
    }

Now, We will write a submit function to store data in local storage

function onSubmit(e) {
        e.preventDefault()
        localStorage.setItem('username', username);
        localStorage.setItem('password', password);
    }

To retrieve the data we will write the following function

function getData() {
        console.log(localStorage.getItem('username'));
        console.log(localStorage.getItem('password'))
    }

Complete form.js is as follows

import React, { useState } from "react";


const Form = () => {

    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    function onChangeUsername(e) {
        setUsername(e.target.value)
    }
    function onChangePassword(e) {
        setPassword(e.target.value)
    }

    function onSubmit(e) {
        e.preventDefault()
        localStorage.setItem('username', username);
        localStorage.setItem('password', password);
    }

    function getData() {
        console.log(localStorage.getItem('username'));
        console.log(localStorage.getItem('password'))
    }
    return (
        <>
            <div>
                <h1>How to store form data in local storage using reactjs</h1>

                <div>
                    <form onSubmit={onSubmit}>
                        <div>
                            <label>Username</label>
                            <input type="text" value={username} onChange={onChangeUsername} />
                        </div>
                        <div>
                            <label>Password</label>
                            <input type="password" value={password} onChange={onChangePassword} />
                        </div>
                        <button type="submit">Submit</button>
                        <button type="button" onClick={getData}>Get Data</button>
                    </form>
                </div>
            </div>
        </>
    );
};

export default Form;

Step 4: Update App.js

Now, We need to call the form.js in our App.js file. To call this write the below logic in App.js

import Form from "../src/components/Form";
import "./App.css";

export default function App() {
  return (
    <>
      <div>
        <Form />
      </div>
    </>
  );
}

Step 5: Run the React Application

To Run the React Project use the below command

npm run start

Output