Hey Dev,

This tutorial will give you an example of how to use localstorage in react js. you will learn how to use localstorage in react js class component. We will look at an example of how to use localstorage in react js functional component. I’m going to show you about react js local storage example.

In this example, we will create simple user form with name and remember me checkbox. Then we will add form submit method to store data into localstorage using setItem() method. so let's see below example code.

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app reactjs-my-example

In this step, we will install bootstrap npm package to use design css. let's run below command:

npm install bootstrap --save

Here, we will create Form.js component and make form. Then we will add form to store data into localstorage on it. so let's update code on following file.

import React from 'react';
 
class Form extends React.Component {
  
  state = {
    user: '',
    rememberMe: false
  };

  /*------------------------------------------
  --------------------------------------------
  componentDidMount() Code
  --------------------------------------------
  --------------------------------------------*/
  componentDidMount() {
    const rememberMe = localStorage.getItem('rememberMe') === 'true';
    const user = rememberMe ? localStorage.getItem('user') : '';
    this.setState({ user, rememberMe });
  }
  
  /*------------------------------------------
  --------------------------------------------
  handleChange() Code
  --------------------------------------------
  --------------------------------------------*/
  handleChange = (event) => {
    const input = event.target;
    const value = input.type === 'checkbox' ? input.checked : input.value;
 
    this.setState({ [input.name]: value });
  };

  /*------------------------------------------
  --------------------------------------------
  handleFormSubmit() Code
  --------------------------------------------
  --------------------------------------------*/
  handleFormSubmit = () => {
    const { user, rememberMe } = this.state;
    localStorage.setItem('rememberMe', rememberMe);
    localStorage.setItem('user', rememberMe ? user : '');
  };
 
  render() {
    return (
      <div>
        <form onSubmit={this.handleFormSubmit}>
          <label>
            User: <input name="user" value={this.state.user} onChange={this.handleChange}/>
          </label>
          <label>
            <input name="rememberMe" checked={this.state.rememberMe} onChange={this.handleChange} type="checkbox"/> Remember me
          </label>
          <button type="submit" className="btn btn-success  ">Submit</button>
        </form>
      </div>
    )
  }
}
 
export default Form;

Here, we will update our App.js file code. we will import Form component and import bootstrap for design. so let's update code on App.js file.

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';

import Form from './Form';

function App() {

  return (
    <div className="App container">
      <h1>How to Use Localstorage in React JS? - MyWebtuts.com</h1>

      <Form />

    </div>
  );
}

export default App;

In the last step run your project using bellow command.

npm start

I hope it can help you...