Loading Please Wait...
HTML web storage API is used to store website data to client device (browser) locally. We can store up to 50MB of data using web storage API.
The stored data can be accessed by each and every page within the same origin (domain or protocol) without affecting the performance.
The web storage API provides two types of objects:
localStorage: The data is stored with no expiration (store data like light theme, dark theme, user name, etc.).
sessionStorage: The data is stored for current tab only (store data like token, verification etc.).
Before using web storage, we can check if storage is supported or not.
if(typeof(Storage) !== "undefined"){
alert('Web storage supported.');
} else {
alert('Web storage not supported.');
}
The localStorage object stores data with no expiration. The data is available all the time even after the browser is closed or device is off. The data is lost only when we remove it or user clears the browsing history.
The data is stored as name=value pair.
setItem() - Method is used to store the data
getItem() - Method is used to retrieve the data
removeItem() - Method is used to delete the data
// Store data
localStorage.setItem("companyName", "Lynxsia IT Solutions");
// Retrieve data
localStorage.getItem("companyName");
// Delete data
localStorage.removeItem("companyName");
In the above example name of data is "companyName" and the value is "Lynxsia IT Solutions".
The above example can also be written as below.
// Store data
localStorage.companyName = "Lynxsia IT Solutions";
// Retrieve data
localStorage.companyName;
// Delete data
localStorage.removeItem('companyName');
The web storage API stores the data as string. We need to convert it as per our requirements.
Below is the example of counter that counts the number of times the button is clicked. The count remains there even if we close the browser and run next time.
<!DOCTYPE html>
<html>
<head>
<script>
function counter(){
if(typeof(Storage) !== "undefined"){
if(localStorage.count){
localStorage.count = Number(localStorage.count) + 1;
} else {
localStorage.count = 1;
}
document.getElementById("result").innerHTML =
"Button is clicked " + localStorage.count + " times.";
} else {
document.getElementById("result").innerHTML = "The storage is supported.";
}
}
</script>
</head>
<body>
<button type="button" onClick="counter()">Click Me</button><br>
<p id="result"></p>
<p>Click the button to count.</p>
<p>
Try closing the tab or browser and visit again,
the counter will continue to count and does not reset.
</p>
</body>
</html>
The sessionStorage is identical to localStorage except the data is available for current session only. The data gets deleted when user closes the tab or browser.
<!DOCTYPE html>
<html>
<head>
<script>
function counter(){
if(typeof(Storage) !== "undefined"){
if(sessionStorage.count){
sessionStorage.count = Number(sessionStorage.count) + 1;
} else {
sessionStorage.count = 1;
}
document.getElementById("result").innerHTML =
"Button is clicked " + sessionStorage.count + " times.";
} else {
document.getElementById("result").innerHTML = "The storage is supported.";
}
}
</script>
</head>
<body>
<button type="button" onClick="counter()">Click Me</button><br>
<p id="result"></p>
<p>Click the button to count.</p>
<p>
Try closing the tab or browser and visit again, the counter will reset.
</p>
</body>
</html>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved