What is HTML5 Web Storage?

Before the introduction of HTML5, all the local data was stored with the help of Cookies. Now that HTML5 has been introduced a long time, there came the feature of storing the data locally in web storage.

Web Storage is more secure and faster than the Cookies. The data of Web Storage is not included with every server request, but it is used ONLY when asked for.

Web Storage can be also used for storing large amounts of user’s data on the browser which was not possible using Cookies, without affecting the website’s performance. The data can be stored upto 5MB which is by far more than the Cookies.

HTML5 Web Storage – How it Works?

The whole process of storing the data is done within the browser. This statement means that there is no need to send data to the server. The data is stored as Key-Value pairs. From the security point of view, the data of the web page is only accessible, which has stored it.

HTML5 Web Storage – Browser Support

All the major browsers available today support HTML5 Web Storage (Internet Explorer 8+, Firefox, Opera, Chrome and Safari).

How to Check Browser Support?

As stated earlier, all the available major browsers support HTML5 Web Storage, but still it is always a good practice to check whether the browser support this feature of HTML5 or not. So before you start using the HTML5 Web Storage, please make sure whether the browser where your page is being loaded supports the HTML5 Web Storage or not.

Given below is the script snippet that can be used to check whether the browser supports the Web Storage or not.

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

HTML5 Web Storage: Objects

As HTML5 Web Storage stores the data on Object basis, so the two categories have been defined to store the data. In other words, it provides two new Objects to store the data on the user’s computer.

• Local Storage  (stores the data with no expiration date)
• Session Storage (stores the data for a particular session, will lose the data when close the browser or tab)

Local Storage

As described earlier the Local Storage Object stores the data with no expiration. In other words, we can say that the data will not be cleared, deleted or misplaced even when we close the browser.

Here is the example script, which can be used for storing the data as Local Storage Object.

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

Local Storage Example: Explanation

In the above-demonstrated example, we have tried to set the lastname to a String value as a key/value pair. Here the key=”lastname” and the value=”Smith”. This key/value pair value will exist in the browser even when the browser tab or window is closed.

The second line then tries to retrieve the value from the localStorage lastname key and set this value to the HTML element.

Conclusion: This script will print the lastname.

Local Storage Object: How to remove stored data?

Sometimes we may need to delete or remove the declared Local Storage Object for as per our requirement of script writing. Below is the syntax which can be used to remove the declared Local Storage Object.

Here is the script for removing the Local Storage items:

localStorage.removeItem("name, which had been declared");

Session Storage

As described earlier the Session Storage Object stores the data for a specific session. Whenever a user closes the browser or the tab window, the data stored will no longer be available. This is the smallest and the only difference between Local Storage Object and Session Storage Object.

Here is the example script, which can be used to store the data as Session Storage Object.

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

Session Storage Example: Explanation

In the above-demonstrated example, we have tried to set the lastname to a String value as a key/value pair. Here the key=”lastname” and the value=”Smith”. This key/value pair value will exist in the browser till the time browser window is open. Once you close the browser window you will have to start again and set the values again.

The second line then tries to retrieve the value from the localStorage lastname key and set this value to the HTML element.

Conclusion: This script will print the lastname.

Session Storage Object: How to remove stored data?

However the Session Storage works for a specific session, and you won’t be in need of removing the stored object, but beyond the ashes if would like to know the removing stored data with Session Storage, you can find a syntax here. This as similar as removing of Local Storage data, only the syntax is changed.

sessionStorage.removeItem("name, which had been declared");