Skip to main content
What is the use of HTML5 local storage?

What is the use of HTML5 local storage?

HTML5 is a markup language used for structuring and presenting content on the World Wide Web (WWW). It is the 5th and current version (at the time of writing this post) of HTML standard.

What is the use of HTML5 local storage? #html5 #localstorage #webstorage Click To Tweet

What is HTML Local Storage?

Local Storage or Web Storage is the storage area provided within all the modern browsers.

HTML5 local storage provides the ability to store data locally within the user’s browser. Prior to HTML5, application data had to be stored in cookies.

Local Storage Features:

  • Local storage is per origin (combination of per domain & protocol).
  • The storage limit is up to 5MB and the data is never transferred to the server.
  • Local storage is more secure and it boosts performance.

HTML5 Local Storage Objects

First of all, lets have a look at the objects provided by HTML5. There are two objects for storing data on the client:

  • LocalStorage : Stores data locally for lifetime. It never expires.
  • SessionStorage : Stores data per user session. Data is lost when session ends.

Local Storage

The localStorage object stores the data for lifetime Which means that the data will not be deleted when the browser is closed, and will be available always.

Usage:

Note: localStorage stores values a name/value pair in string format.

SessionStorage

The sessionStorage object is similar to localStorage, except that it stores the data for only one session i.e The data is deleted when the user closes the specific browser or browser tab.

Usage:

if (sessionStorage.hits) {
    sessionStorage.hits= Number(sessionStorage.hits) + 1;
} else {
    sessionStorage.hits = 1;
}
document.getElementById("sessionStorageResult").innerHTML =
"You have refreshed the page " + sessionStorage.hits + " time(s) in this session.";

Closing note with a hope that you have understood the localStorage concept in HTML5 and can implement it in your application very easily.

What do you think?

Dear Readers,
If you have any questions or suggestions please feel free to email us or put your thoughts as comments below. We would love to hear from you. If you found this post or article useful then please share along with your friends and help them to learn.

Happy Crunching!

Was this article worth reading? Share it with fellow developers too.

DotNetCrunch

DotNetCrunch is a popular blog for latest Microsoft® technologies which is aimed for beginners and intermediate level professionals.