How to Clear Local Storage Using JavaScript
This post illustrates all possible methods to clear “local storage” using JavaScript.
How to Clear Local Storage Using JavaScript?
The “clear()” method allows the users to remove the local storage item stored in the current domain i.e., browser. The local storage item is saved with no expiration date. This method removes all of the stored local storage items at once.
Syntax
The above syntax does not require any additional parameters to clear the local storage items.
Example: Applying the Storage “clear()” Method to Clear All the Local Storage Items
This example explains the practical implementation of the storage “clear()” method to remove all the local storage items.
HTML Code
First, have a look at the given HTML code:
<h3>Create Items</h3>
<p>Create the local storage items.</p>
<button onclick="create()">Create local storage items</button>
<p id="demo"></p>
<p id="sample"></p>
<p id="para"></p>
<p id="para2"></p>
<h3>Remove Items</h3>
<p>Remove all local storage items.</p>
<button onclick="remove()">Clear items</button>
In the above code lines:
- The “<h2>” tag adds a first subheading having the “style” attribute that sets the following style attributes on it.
- The “<h3>” tag specifies a second subheading of level 3.
- The “<p>” tag creates a paragraph statement.
- The “<button>” tag adds a button with an attached “onclick” event to execute the function “create()” upon the button click.
- After that, the next four “<p>” tags add empty paragraphs with their assigned ids to display the created storage items when the event trigger.
- The next “<h3>” and “<p>” tags specify another heading and paragraph statement.
- The last “<button>” tag adds another button having an “onclick” event to allow the execution of the “remove()” function.
JavaScript Code
Next, follow the below-given code:
function create() {
localStorage.setItem("firstname", "Anna");
document.getElementById("demo").innerHTML = localStorage.getItem("firstname");
localStorage.setItem("lastname", "johnson");
document.getElementById("sample").innerHTML = localStorage.getItem("lastname");
localStorage.setItem("age", "22");
document.getElementById("para").innerHTML = localStorage.getItem("age");
localStorage.setItem("gender", "female");
document.getElementById("para2").innerHTML = localStorage.getItem("gender");
}
function remove() {
localStorage.clear();
alert("Local Storage items have been cleared");
}
</script>
In the above code snippet:
- First, the function “create()” applies the “localStorage” property that is associated with the “setItem()” method to set the specified local storage items one by one, respectively.
- Secondly, the “getElementById()” method is applied one by one to access the empty paragraph using their unique ids to append them with the local storage item “value” that is retrieved through the “getItem()” method via its corresponding “key”.
- Next, the “remove()” function uses the “clear()” method to remove all the local storage items and then displays the stated message written in the created “alert” box.
Output
The output first creates the specified local storage items and then removes all of them with the help of the “clear()” method upon the “Clear items” button click.
Conclusion
JavaScript offers the “clear()” method to clear the local storage. This method removes all the local storage items at the same item without specifying any of the storage item “keyname”. It makes the removal method of local storage relatively easy as compared to deleting them one by one. This post demonstrated the possible methods to clear the “local storage” using JavaScript.
Source: linuxhint.com