Web Storage in HTML 5

Introduction

Web Storage is one of the great features of HTML5. It enables web applications to store data locally with the user's browser. It is different from the old ways of storage with cookies in many ways. Cookies are included in each HTTP request to the server. That makes the request larger and that can slow down the performance of a web application. Web storage is never transferred to the server. It supports nearly 5 MB of data compared to 4 KB with cookies. The two storages are session storage and local storage.

window.localStorage: stores data with no expiration date so the data will persist even if the user closes the tab
window.sessionStorage: stores data for the one session and the data would be lost when the user closes the tab

We store the data in web storage as Name/Value pair as in the following:

sessionStorage.setItem("firstname", "Ratnesh");
localStorage.setItem("lastname", "Singh");

localStorage.lastname = "Singh";
sessionStorage.firstname= "Ratnesh";

If we need to delete the data form Local storage then we need to use:

localStorage.removeItem("lastname");

localStorage.clear();

HTML Code:

<!DOCTYPE html>
<html>
<head>
<script>
function SetName()
{
if(typeof(Storage) !== "undefined")
{
localStorage.setItem("lastname", "Singh");
sessionStorage.setItem("firstname", "Ratnesh");
}
}
function GetName()
{
if(typeof(Storage) !== "undefined")
{
document.getElementById("divName").innerHTML = sessionStorage.getItem("firstname")+' ' +localStorage.getItem("lastname");
}
}
function RemoveName()
{
if(typeof(Storage) !== "undefined")
{
localStorage.clear();
//localStorage.removeItem("lastname");
}
}
</script>
</head>
<body>
<p><button onclick="SetName()" type="button">Set Name</button>
<button onclick="GetName()" type="button">GetName</button>
<button onclick="RemoveName()" type="button">Remove Name</button></p>
<div id="divName"></div>
</body>
</html>

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