Web Storage in HTML5


Web storage is the feature that enables the web pages to store the data in user’s browser. Before this feature, it was done through cookies, but after HTML5, this process has been made faster and secure. In this tutorial we will learn html5 webstorage feature.

Step #1 – Checking Browser Support

Before using web storage, website should make sure to check whether the browser supports the two functions of HTML5 web storage.

The coding shown in the image below gives the concept of checking whether the web storage feature is supported by the browser or not.

Support for HTML5 Web Storage

Step #2 – Local Storage

Local storage is the type of the storing in which the data is not removed even after the browsing session has ended.

In the example shown, we actually are creating a local storage key and after that we are retrieving that key and inserting into document.getElementById function.

Local Storage

Step #3 – Local Storage in an Example

The code in example is about counting the number of time user has clicked a button.

Local Storage in an Example (Header Code)

Step #4 – Inserting Local Storage inside HTML Body

The image below shows how we will use the code in the body of html page.

Implementation inside HTML body

Step #5 – Session Storage Example

Now let’s consider the sessionStorage object, which is the same as localStorage except it stores data only for one session.

Session Storage code

Step #6 – Body code of Session Storage

The coding shown in the image will be implemented in the body of html to check session for web storage in html5.

Session Storage in HTML Body

And this was all about web storage in html5.