On websites, the local storage is the data storage system. It permits the various applications and websites to gather, store and access the data without any expiry date which means that the data will always be stored and accessed easily and will not be expired. The data will remain safe, and persistent even after closing the web browser but sometimes, the web browser does not work properly when the data exceeds its limits. In that scenario, there is a need to clear the local storage to avoid any hassle. To do so, the “clear()” method of JavaScript is invoked to clear the data stored in the local storage.
This post will demonstrate a method for clearing the local storage in JavaScript.
How to Clear localStorage in JavaScript?
To clear the localStorage in JavaScript, the “clear()” method of JavaScript can be used. For that purpose, try out the instructions given below.
Step 1: Insert Heading
Insert a heading by using the HTML heading tag from h1 to h6. In this blog post, the “<h1>” tag is utilized for the main heading, and the “<h2>” for the second heading.
Step 2: Create Button
After that, use “<button>” element to create a button, and then add the “onclick” attribute to trigger the event when a user clicks on the button to perform an action. To do so, define a function as the value of the “onclick” event:
<button onclick="createElements()">Create Local Storage Elements</button>
<h2>Display Elements</h2>
<button onclick="displayElements()"> Show Content</button>
<p id="display"></p>
<h2>Remove Items</h2>
<button onclick="deleteElements()"> Clear Local Storage </button>
<h2>Display Items Again</h2>
<button onclick="displayElements()"> Show Again </button>
Step 3: Set Item in Local Storage
To set an item in local storage, invoke the function that is defined on the “onclick” event and use the “setItem()” method to set the value of the specified storage object item:
localStorage.setItem("Welcome to Linuxhint ", " ");
localStorage.setItem("Clear Storage Method ", " ");
}
Step 4: Clear LocalStorage Items
To clear the local storage item in JavaScript, the “clear()” method is used. The clear() method removes all items from the local storage when the user clicks on the button:
localStorage.clear();
}
Step 5: Display Items
Invoke the “displayElement()” function and get the element using its assigned id. Then, we will be looping the element with the help of the “for” loop and store the defined elements in a variable:
let l, i;
document.getElementById("display").innerHTML = "";
for(i = 0; i < localStorage.length; i++) {
res = localStorage.key(i);
document.getElementById("display").innerHTML += res;
}
}
That’s all about clearing localStorage in JavaScript.
Conclusion
To clear the local storage in JavaScript, first, make a button with the help of the “<button>” element on the HTML page. After that, embed the “onclick” event to perform the action when a user hits/clicks on the button. Then, access the button using its assigned id and utilize the “clear()” method to clear the element from the page.
