HTML Web Storage API

Web hosting is more secure, and large amounts of data can be stored locally without impacting website performance.

HTML web storage is better than cookies .

What is HTML Web Storage?

With Web Storage, web applications can store data locally within the user's browser.

Before HTML5 , application data had to be stored in cookies, which were included in every server request. Web hosting is more secure, and large amounts of data can be stored locally without impacting website performance.

Unlike cookies, the storage limit is much larger (at least 5MB) and the information is never transferred to the server.

Web hosting is origin-based (by domain and protocol). All pages from a single source can store and access the same data.

Browser support

The numbers in the table indicate the first browser version to fully support Web Storage.

HTML Web Storage Objects

HTML Web Storage provides two objects for storing data on the client side:

• window.localStorage- storing data without an expiration date
• window.sessionStorage- Stores data for a session (data is lost when closing the browser tab)

Before using web hosting, check your browser's support for localStorageand sessionStorage:

if (typeof(Storage) !== "undefined") { // Code for localStorage/sessionStorage. } else { // Sorry! No Web Storage support. }

localStorage object

This object localStoragestores data without an expiration date. The data will not be deleted when the browser is closed and will be available the following day, week, or year.

For example:

// Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname");

The example is explained as follows:

• Create a name/value pair for localStorage with name="lastname" and value="Smith"
• Get the value of "lastname" and insert it into the element with id="result"

The example above could also be written like this:

// Store localStorage.lastname = "Smith"; // Retrieve document.getElementById("result").innerHTML = localStorage.lastname;

The syntax for deleting the localStorage entry "lastname" is as follows:

localStorage.removeItem("lastname");

Note : Name/value pairs are always stored as strings. Remember to convert them to other formats when necessary!

The following example counts the number of times a user has clicked a button. In this code, the string value is converted into a number so that the counter can be incremented:

if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";

sessionStorage object

This object sessionStorageis equivalent to the `` object localStorage, except that it stores data only for a single session. The data is deleted when the user closes a particular browser tab.

The following example counts the number of times a user has clicked a button in the current session:

if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";