Solution

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

sessionStorage.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 sessionstorage using sessionStorage.removeItem() method.

sessionStorage.removeItem('bgcolor');

Example

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

Let’s start coding…

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

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

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

  const removeSessionstorage = () => {
    sessionStorage.removeItem('bgcolor');
  };

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

Output

sessionStorage, removeItem

codesandbox