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 2 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
