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.
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.
Step #3 – Local Storage in an Example
The code in example is about counting the number of time user has clicked a button.
Step #4 – Inserting Local Storage inside HTML Body
The image below shows how we will use the code in the body of html page.
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.
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.
And this was all about web storage in html5.
Home