Solution

To clear localstorage in react js, use localStorage.clear() method it will delete all keys and values from localstorage.

localStorage.clear()

The clear() method of the Storage interface clears all keys stored in a given Storage object.

Snippet

In this snippet, we will clear all keys localstorage using localStorage.clear() method.

localStorage.clear();

Example

In this example, we will store some values in localstorage after then use localStorage.clear() method to delete all values.

Let’s start coding…

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

    setTimeout(() => {
      clearLocalstorage();
    }, 5000);
  }, []);

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

  const clearLocalstorage = () => {
    localStorage.clear();
  };

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

Output

localStorage, Clear