Web Storage in HTML 5

Here we have used “if(typeof(Storage) !== "undefined")” to check whether the browser supports the web storage or not.

To show the difference between sessionStorage and webStorage I have created a separate page with two buttons. On the click of “Click me!”, I am increasing the hit count by one and storing this number to each type of storage.

I have opened three instance of the page in the browser. I clicked the “Click me!” button thrice on each page. Then I clicked “Refresh” on each page. In the screen grab we can see that session hits count is three for each instance and the total hits is 9. So we can see that localStorage is common for all but sessionStorage is independent of each other.

HTML file

<!DOCTYPE html>
<html>
<head>
<script>
function Counter()
{
if(typeof(Storage) !== "undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount = Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount = 1;
}
if (sessionStorage.clickcount)
{
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount = 1;
}
document.getElementById("divLocalStorageResult").innerHTML = "Total hits in all session :" + localStorage.clickcount ;
document.getElementById("divSessionStorageResult").innerHTML = "Hits in Current session :" + sessionStorage.clickcount ;
}
}
function GetCounter()
{
if(typeof(Storage) !== "undefined")
{
document.getElementById("divLocalStorageResult").innerHTML = "Total hits in all session :" + localStorage.clickcount ;
document.getElementById("divSessionStorageResult").innerHTML = "Hits in Current session :" + sessionStorage.clickcount ;
}
}
</script>
</head>
<body>
<p>
<button onclick="Counter()" type="button">Click me!</button>
<button onclick="GetCounter()" type="button">Refresh</button>
</p>
<div id="divLocalStorageResult"></div>
<div id="divSessionStorageResult"></div>
</body>
</html>

Conclusion

In this article, we studied Web Storage in HTML 5

Web Storage in HTML 5

Reactions

Introduction

4 Comments

Conclusion