It is a simple client side database that allows the users to store 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.

IE7 and older versions do not support Web Storage. All the other browsers like Chrome, Opera, Firefox, Safari and IE8+ support Web Storage.

When we are filling a form online, from the second time we can see that some fields details are coming automatically. It is not auto filled. When we click on that field the data are coming. For which purpose the data are coming? The data are coming because of the cookie.

Cookies are small pieces of messages sending from the web server to the web browser. In the web browser it is stored in the form of small text files. Cookies are used to provide the users a more personalized experience for browsing. Unlike cookies, the data stored are not included with every HTTP request.

Disadvantage of Cookies:

• With each server calls cookies will send the data stored to server, this will affect the site’s performance.

• web storage space for cookies is too low, less than 4kb.

Advantage of HLML5 Web Storage :

Compared to cookie, HTML 5 web storage has many advantages.

• Size is not limited to < 4 kb , web storage can use 5 mb of space.

• Web storage not sending the data to server with each server calls, this will improve the sit performance.

• improved security.

General Methods Of Web Storage

There are basically two types of storage.

1. Local Storage : It stores data permanently in the browser. It can never be deleted or erased automatically. We have to delete items manually if we want.

2. Session Storage : It will save the data for a short period of time. The data stored will deleted when we close the browser or tab. So it will store the data for particular session only.

HTML5 Local Storage Objects

HTML local storage provides two objects for storing data on the client:

• window.localStorage - stores data with no expiration date

• window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

The Localstorage Object

It stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Example:

The syntax for removing the "lastname" localStorage item is as follows:

localStorage.removeItem("lastname");

The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.

The following example counts the number of times a user has clicked a button, in the current session:

Example:

So in compare with cookie storing, the web storing is more useful and convenient. Because

Cookies are included with every HTTP request, thereby slowing down the web application by transmitting the same data.

Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.

Cookies are limited to about 4 KB of data . Not enough to store required data.