Clear Local Storage JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of clear local storage JavaScript, as we know local storage means we can store some data on web browser that will only belongs to JavaScript site or apps and also it had no expire date even when we close window it will not erased.
Here we collecting vehicle details like ‘brand, price, index number’ then we converting them as json data and stored on web browser and we can retrieve and clear them.
Step By Step Guide On Clear Local Storage JavaScript :-
Here we created form with four input fields for collect details of ‘vehicle, brand, price, index number’ and a button ‘Store Records’ created with onclick event with function call ‘store()’ as value for loads it when user clicks on it.
Another input tag defined for retrieve stored json data by index number and button ‘Retrieve Record’ will initialize function retrieveRecords() call for showing retrieved result on webpage.
The ‘Clear Records’ button will erase whole local storage make it as empty by clr_records() method.
Those declared methods defined in external storage.js script file. There we using setItem(), getItem() methods for doing store and retrieve, clearly delete like process interact with local storage.
<!DOCTYPE html>
<html>
<head>
<title>CLEAR LOCAL STORAGE</title>
<script src="storage.js"></script>
</head>
<body>
<form action="" id="frm">
<input type="text" id="vhcl" placeholder="Vehicle" autofocus><br>
<input type="text" id="brand" placeholder="Brand" autofocus><br>
<input type="text" id="price" placeholder="Price" autofocus><br>
<input type="text" id="indx" placeholder="Index Number" autofocus><br>
<button onclick="store()">Store Records</button><br><br>
<div>
<input type="text" id="retrieveKey" placeholder="Retrieve Index Number">
<br>
<button id="retrievebtn" onclick="retrieveRecords()">Retrieve Records</button>
</div>
<br><br>
<div>
<button onclick="clr_records()">Clear Records</button>
</div>
</form>
</body>
</html>
Storage.js
function store(){
var v=document.getElementById('vhcl').value;
var b=document.getElementById('brand').value;
var p=document.getElementById('price').value;
var x=document.getElementById('indx').value;
const arr={
vehicle:v,
brand:b,
price:p,
}
window.localStorage.setItem(x,JSON.stringify(arr));
document.write("Record Stored Successfully");
}
function retrieveRecords(){
var key=document.getElementById('retrieveKey').value;
var rec=window.localStorage.getItem(key);
document.write("Retrieved records");
document.write("<br><br>"+rec);
}
function clr_records(){
localStorage.clear()
alert("Cleared Records Successfully");
}- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined form with four input fields with attribute ‘id’ with different values ‘vhcl, brand, price, indx’ for collect vehicle type, vehicle brand, vehicle price, vehicle reference number like key from user.
- Button ‘Store Records’ defined for submit user inputs on web browser’s local storage done by ‘store()’ method defined at external script file ‘storage.js’.
- Another input tag with id ‘retrieveKey’ defined for collect index number of needs to retrieving json data and button ‘Retrieve Record’ defined for get user json data belongs to specified index number in web browser’s local storage done by ‘retrieveRecord()’ method.
- Button ‘Clear Records’ when clicked by user all local storage data get deleted by ‘clr_records()’ method.
- In script we defined store() method, here we storing ‘vehicle,brand,price,index number’ collected inputs from user on respective variables ‘v,b,p,x’.
- We declared array ‘arr’ with keys ‘vehicle,brand,price’ and values refers as dynamic values based on users.
- The window.localStorage.setItem() line refers we sets user input values on local storage of window and there we converting them as json data by JSON.stringify() method then we printed message ‘Record Stored Successfully’ on webpage.
- In retrieveRecord() method we storing ‘retrieveKey’ element value to variable ‘key’ then using getItem() method we collecting ‘key’ value belongs json data from web browsers local storage and stored on variable ‘rec’.
- At last we printed message ‘Retrieved records’ with retrieved json data of result on webpage. If they provide some other index number from local storage then result will empty.
- For clear whole local storage we defined method ‘clr_records()’ there clear() will erase them clearly then printed ‘Cleared Records Successfully’ message on alertbox.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to use local storage in JavaScript.
When we executes program on browser we can see four input fields ‘Vehicle, Brand, Price, Index Number’ there user needs to fill them and when clicks on ‘Store Records’ message ‘Record Stored Successfully’ will displayed.
For retrieve stored data user needs to give index number as input on ‘Retrieve Index Number’ input fields then when user clicks ‘Retrieve Record’ button result of json data will displayed with ‘Retrieved records’ message.
Finally when user click on ‘Clear Records’ button stored whole records of json data erased then ‘Cleared Records Successfully’ message will pop up on alertbox.
I hope this tutorial on clear local storage JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
