is a professionally managed web design and web development company in Hyderabad, India.
Friday, 7 February 2014
HTML5 Web Storage
HTML5 Web Storage
One of the reasons that certain technocrats favor native applications is their ability to store data locally on the client. HTML5 made a breakthrough by allowing web applications to store data in the browser.
Although cookies are available to store data in the browsers, there are certain disadvantages to that – which were addressed with the invention of HTML5 Web Storage.
Disadvantages of Cookies
The storage limit of cookies in web browsers is limited to about 4KB.
Cookies are sent with every HTTP request, thereby slowing down the web application performance.
What is HTML5 Web Storage?
It is a simple client side database that allows the users to persist data in the form of key/value pairs.
It has a fairly simple API to retrieve/write data into the local storage. It can store up to 10MB of data per domain. Unlike cookies, the data stored are not included with every HTTP request.
IE7 and older versions do not support Web Storage. All the other browsers like Chrome, Opera, Firefox, Safari and IE8+ support Web Storage.
Types of Web Storage
Local storage: Stores data with no expiration date. The data will be available even when the browser/ browsing tab is closed or reopened.
Session storage: Stores data for one session. Data persisted will be cleared as soon as the user closes the browser.
In both the cases, please note that the web storage data will not be available between different browsers.
Let us dive directly into an example to have a better understanding of HTML5 Web Storage.
We will create a simple user settings web page that will allow us to change the page’s background color and header font size.
alert('Cannot store user preferences as your browser do not support local storage');
We can check whether the data is stored in local storage by using the developer tools that comes with the browsers. For instance, in Chrome, right click on the browser and select Inspect Element. Select Resources tab and then click on the local storage item. We can see the user selected data stored in the form of key/value pairs.
The web page can be reloaded with the background and font size values set by the user. ThegetItem(‘Key’) helps in retrieving the data stored In the database.