Solution

To remove data from localstorage in react js, use localStorage.removeItem() method it will delete the key and value from localstorage.

localStorage.removeItem()

The removeItem() method of the Storage interface, when passed a key name, will remove that key from the given Storage object if it exists.

Snippet

In this snippet, we will delete the key and value localstorage using localStorage.removeItem() method.

localStorage.removeItem('bgcolor');

Example

In this example, we will store some values in local storage and then use the localStorage.removeItem() method to delete keys.

Let’s start coding…

import React, { useEffect } from "react";
export default function App() {
  useEffect(() => {
    storeLocalstorage();

    setTimeout(() => {
      removeLocalstorage();
    }, 3000);
  }, []);

  const storeLocalstorage = () => {
    localStorage.setItem("bgcolor", "red");
    localStorage.setItem("font", "Helvetica");
    localStorage.setItem("image", "miGato.png");
  };

  const removeLocalstorage = () => {
    localStorage.removeItem('bgcolor');
  };

  return (
    <div className="App">
      <h1>{`bgcolor From Localstorage`}</h1>
      <p>{localStorage.getItem("bgcolor")}</p>
    </div>
  );
}

Output

localStorage, removeItem