Understanding HTML5 Web Storage

Web Storage is an HTML5 feature that allows you to store data on the client side. Web Storage consists of two objects, localStorage and sessionStorage.

localStorage

The localStorage object is a single persistent object, which is stored on the local device. It is available even when the browser window is closed and the cache and cookies are cleared.

Saving data in localStorage is as easy as writing; one can do so in either of the following ways:

• window.localStorage['name']= 'John Doe';
• window.localStorage.setItem('name','John Doe');

In the preceding code, name is the key, and John Doe is the value that we are associating with the key.

Reading data from localStorage is equally easy; one can do so in either of the following ways:

• var myName = localStorage['name']
• var myName = localStorage.getItem('name')

A couple of things to remember about localStorage are as follows:

• The data in localStorage is always stored...