October 29, 2020
local-storage-session-storage

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);
}

Rashedul Alam

I am a software engineer/architect, technology enthusiast, technology coach, blogger, travel photographer. I like to share my knowledge and technical stuff with others.

View all posts by Rashedul Alam →

One thought on “HTML5 Local Storage and Session Storage

Leave a Reply

Your email address will not be published. Required fields are marked *