This post demonstrates the Storage “removeItem()” method in JavaScript.
What is the Storage “removeItem()” Method in JavaScript?
The Storage “removeItem()” method corresponds to the “Storage” object that removes the targeted storage object item. The “storage” object may be the “local” or the “session” storage. The “local” storage object sets and retrieves through the “localStorage” property whereas the “session” storage is evaluated using the “sessionStorage” property.
Syntax (Remove Local Storage)
The above syntax requires only one mandatory parameter “keyname” to access the local storage object item and remove it.
Syntax (Remove Session Storage)
The “sessionStorage” object also requires only the “keyname” parameter for the removal of session storage.
Let’s use the above syntaxes to remove the “local” and “session” storage items one by one.
Example 1: Applying the Storage “removeItem()” Method to Remove the Specific Local Storage Item
In this example, the Storage “removeItem()” method removes the specific local storage item.
HTML Code
First, go through the following HTML code:
<h3>Create Item</h3>
<p>First create the local storage item.</p>
<button onclick="create()">Create local storage item</button>
<h3>Display Item</h3>
<p>Second read the local storage item's value:</p>
<button onclick="display()">Display item</button>
<p id="demo"></p>
<h3>Remove Item</h3>
<p>Third remove all local storage items</p>
<button onclick="remove()">Delete item</button>
In the above code lines:
- The “<h2>” tag adds a first subheading using the “style” property that sets the following style attributes of the heading.
- The “<h3>” tag specifies a second subheading.
- The “<p>” tag creates a paragraph statement.
- The “<button>” tag adds a button with an attached “onclick” event to execute the “create()” function when this event is triggered.
- After that, likewise the next “<h3>”, “<p>”, and the “<button>” tags are specified accordingly.
JavaScript Code
Next, move on to the following code:
function create() {
localStorage.setItem("Website", "Linuxhint");
}
function display() {
var t = localStorage.getItem("Website");
document.getElementById("demo").innerHTML = t;
}
function remove() {
localStorage.removeItem("Website");
alert("Stored item has been removed");
}
</script>
In the above code snippet:
- First, the function “create()” applies the “localStorage” property associated with the “setItem()” method to set the specified storage item.
- Next, the function “display()” utilizes the “getItem()” method with the “localStorage” property to display the corresponding value of a local storage item in an empty paragraph. This paragraph is accessed through the “getElementById()” method using its id “demo”.
- After that, the function “remove()” uses the “removeItem()” method that accesses the local storage item with the help of its specified “key” name to remove its “value” and then displays the stated message written in the created “alert” box.
Output
Here, the output removes the saved local storage item and pops up an alert box with the specified message statement upon the button i.e., “Delete item” click.
Example 2: Applying the Storage “removeItem()” Method to Remove the Specific Session Storage Item
This particular example utilizes the “removeItem()” method to remove the particular session storage item instead.
HTML Code
Follow the given HTML code:
<h3>Create Item</h3>
<p>First create the session storage item.</p>
<button onclick="create()">Create session storage item</button>
<h3>Display Item</h3>
<p>Second read the session storage item's value:</p>
<button onclick="display()">Display item</button>
<p id="demo"></p>
<h3>Remove Item</h3>
<p>Third remove the stored item</p>
<button onclick="remove()">Delete item</button>
The above code specifies the same tags as in Example 1 but with the modified content.
JavaScript Code
Now, proceed to the below-provided code:
function create() {
sessionStorage.setItem("Website", "Linuxhint");
}
function display() {
var t = sessionStorage.getItem("Website");
document.getElementById("demo").innerHTML = t;
}
function remove() {
sessionStorage.removeItem("Website");
alert
</script>
Here, the session storage item is created, displayed, and removed using the “sessionStorage” property and the discussed methods.
Output
In this outcome, the “removeItem()” method removed the session storage item accordingly.
Conclusion
The JavaScript Storage “removeItem()” method is used for the removal of both the “local” and the “session” storage objects. However, the “session” storage object can also be easily removed by closing the web browser. It first accesses the specified storage item and then removes it permanently from the storage. It only requires the “keyname” parameter to perform this task. This post illustrated the working of the Storage “removeItem()” method in detail.
