HTML5 Local Storage and Session Storage

In our web application we need to store data. We can do this in different ways and we can store our data on client side as well as server side. We can choose any of them according to our need and level of security policy. HTML5 introduces two mechanisms, session storage and local storage for storing data on the client side. Let’s discuss on these. Summary of the article:

• What is HTML Local Storage?
• What is HTML Session Storage?

What is HTML Local Storage?
By using local storage web applications can store data locally within the user’s browser. It persists the data until the user explicitly deletes the data. Local storage data is available even after the browser is closed and reopened. An example is given bellow:

--Store data
if (typeof (Storage) !== "undefined") {
   localStorage.UserName = "Mr. ABCD";
}

--Retrieve data
if (typeof (Storage) !== "undefined") {
   var User_Name = localStorage.UserName;
   alert(User_Name);
}

What is HTML Session Storage?
Session storage is similar to local storage except that it stores the data for only one sessions. It persists data until the user close the specific tab/window. An example is given bellow:

--Store data
if (typeof (Storage) !== "undefined") {
   sessionStorage.UserName = "Mr. ABCD";
}

--Retrieve data
if (typeof (Storage) !== "undefined") {
   var User_Name = sessionStorage.UserName;
   alert(User_Name);
}