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