Modern day browsers are definitely on the verge of reducing gap between web client and the mobile. Browsers are becoming more intelligent and are offering same functionalities like native mobiles. New HTML5 attributes and functionalities like the geolocation, vibrator APIs or camera accessibility are helping to bridge this gap.
Webstorage is among the new features provided by HTML5. Webstorage provides the functionality of storing the data in browser memory. HTML5 Web Storage can be considered as an improvement in ‘cookies’. The difference between the cookies and the HTML5 offline local storage is that the cookies have 4 KB of data storage limitation (which is not sufficient) and are passed on to every page.
The biggest advantage of HTML5 webstorage is that the stored data is available till any length of time. The webstorage browser data won’t expire unless removed or deleted explicitly. Even, closing the browser won’t remove the stored data in Web storage. Due to this feature web storage is also called ‘Offline Storage’.
Offline storage or webstorage gives the capability to the modern browsers to store the data upto 5 MB in Chrome, Firefox and Opera and 10 MB in Internet Explorer (IE is ahead of its competitors in here).
Although, webstorage provides the data storage capability in modern web browsers don’t expect it to use any SQL like queries to store and retrieve data. webstorage data is stored in Key – Value pairs in the browsers. webstorage data doesn’t have any datatype associated with the keys. All the data is considered as string. Although, you are storing integer 1, the webstorage will treat it as a string and store.
More and more browsers are supporting webstorage now and making the data available offline. The following image shows the browser versions and the support for the offline webstorage.
Types of Webstorage
HTML5 offers offline webstorage in following 2 ways.
1. Local Storage
The local storage provides a way to store the data in the browser for indefinite period of time. Meaning, the data can be available after closing the browser and reopening.
Storing the local storage data
As mentioned earlier, data is stored in webstorage using key-value pair.HTML5 provides ‘localStorage’ object to accomplish this task. ‘localStorage’ object uses ‘setItem’ and ‘getItem’ methods to store and retrieve the data respectively. Let us store a value ‘Techrecite’ with key ‘website’ in the browser webstorage. Simply by writing following line of code will do the trick.
OR a key can be directly associated with the localStorage object as
If you close the browser and open it, you still will values in the browser storage.
The stored values can be checked in Chrome browser.
How to check the webstorage stored data in Chrome browser
1. Right click on the webpage against the webpage to be checked.
2. Go to Inspect element -> ‘Resources’ tab of the opened window
3. Click on the left arrow beside the ‘Local Stoage’ menu
4. Click on the site name on the available values.
5. On right side of the pane, you can see the key-value pair of the HTML5 offline webstorage.
Retrieving stored data in offline storage is as simple as storing it.
Stored data can be deleted using the removeItem method.
This will remove the key and the value stored in the offline storage.
2. Session Storage
Do not get confused with the php or any programming language session. The HTML5 webstorage session provides a way to store the data as long as you have not closed the browser window. Session storage does not have persistent data storage capability like local storage.
HTML5 provides ‘sessionStorage’ object to accomplish.
Storing the data
Session storage data can be stored using setItem method along with the sessionStorage object
Deleting session data
Session data can be deleted using the removeItem method same used in localStorage.
Another interesting method ‘length’ can be used to find out the items (total key-value data pairs) stored in sessionStorage.
Caution: While HTML5 Web Storage provides a way to store data in browsers. So, sensitive information like username/password should not be stored in the web browser. It is always a best practice to encrypt the key-value pair before storing any data in Web Storage.