| by Arround The Web | No comments

What is the Storage removeItem() Method in JavaScript

JavaScript comes with two types of storage objects “local” and “session” that stores the data in the local storage i.e., web browser. The “local” storage object stores data for the particular website with no expiration date whereas the “session” storage” object saves data for only the current session. When these objects are stored, then they can easily be removed with the help of the built-in storage “removeItem()” method. This method removes the particular “local” or “session” storage key-value pair. Also, it helps to access unnecessary storage items and remove them permanently.

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)

localStorage.removeItem(keyname)

The above syntax requires only one mandatory parameter “keyname” to access the local storage object item and remove it.

Syntax (Remove Session Storage)

sessionStorage.removeItem(keyname)

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:

<h2 style="text-align: center;color: blue;">Storage removeItem() Method in JavaScript</h2>
<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:

<script>
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:

<h2 style="text-align: center;color: blue;">Storage removeItem() Method in JavaScript</h2>
<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:

<script>
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.

Share Button

no related pages

Source: linuxhint.com

Leave a Reply