This is a way for web pages to store named key/value pairs locally, within a client browser. This data is persistent  even after you navigate away from the web site and even exit your browser. This data is never transmitted to the remote web server and, is implemented natively in web browsers, so it is always available.

Checking for Storage in JavaScript

   1: function supports_html5_storage() 

   2: { try 

   3: { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) 

   4: { return false; } }

Key Value Pairs

You  data is based on a named key, that allows you to retrieve data with the same key name. The named key is a string. The data can be any type supported by JavaScript, including strings, Booleans, integers, or floats. The data is actually stored as a string. If you are storing and retrieving anything other than strings, you will need to use functions like parseint or parsefloat  to convert your retrieved data into the expected data type.

   1: interface Storage { getter any getItem(in DOMString key); 

   2: setter creator void setItem(in DOMString key, in any data); };

If your named key already exists calling setItem() will overwrite previously stored data without asking. While if you have a non existent key value pair calling  getItem() will return a null value instead of throwing an error so you have to be mindful of null values..

Like other JavaScript objects, you can treat the localstorage object as an array. Instead of using the getItem() and setItem()  methods, you can \use square brackets.

var foo = localStorage.getItem("persona");

or

localStorage["persona"] = foo;

If you want to clear out the entire storage area you would do something like this..

   1: interface Storage 

   2: { deleter void removeItem(in DOMString key); 

   3: void clear(); 

   4: };

If you’d like to get the name of each key and find out the total number of values in your storage you can do something like this..

   1: interface Storage 

   2: { readonly attribute unsigned long length; 

   3: getter DOMString key(in unsigned long index); 

   4: };

To remove an item from storage you just call removeItem()

Internet Explorer 9 adds the W3C standard Event Listener to watch for changes in your storage..

   1: if (window.addEventListener) 

   2: { window.addEventListener("storage", handle_storage, false); } 

   3: else { window.attachEvent("onstorage", handle_storage); };

The call back from this which is tied to a StorageEvent (which by the way changes between IE 8 and IE 9)  looks like this:

   1: function handle_storage(e) 

   2: { if (!e) 

   3:  { e = window.event; }

   4: }

StorageEvent contains the following properties

Space Limits

5 megabytes is how much storage space each get by default. “QUOTA_EXCEEDED_ERR” is the exception that will get thrown if you exceed your storage quota of 5 megabytes. Right now these seem to be hard firm limits across browsers.

WebSQL

In many of the HTML 5 browsers (but not all of them) database capability exists in the form of a SQL data basing option.. Here’s a quick example that sets up and opens a database..

   1: openDatabase('mydocuments', '1.0', 'Local document storage', 5*1024*1024, function (db) 

   2: { db.changeVersion('', '1.0', function (t) 

   3: { t.executeSql('CREATE TABLE docids (id, name)'); }, error); });

http://zef.me/2774/persistence-js-an-asynchronous-javascript-orm-for-html5gears

Over at HTML5Demos.com there is even a WebSQL database to store tweets from Twitter..

http://html5demos.com/database

Currently since WebSQL isn’t supported in IE 9 this doesn’t work..

Hurray for cross browser standards.. One reason I think Microsoft is making a huge mistake with their path versus Silverlight..

Considering the size of Microsoft and the fact that they have a serious SQL Server database team, as well as the IE team this is a HUGE HOLE in their strategy. It also blows their browser for serious cross-compatibility at this time…