Sunday, 9 January 2011

HTML5- Welcome Web Storage

Till web storage was introduced I'd not even thought that something so lightweight as web storage will come up for client side storage. Thanks to HTML 5, we can now say bye to cookies.

It comes as localStorage and sessionStorage, similar in behavior(and methods) but differing in their lifetimes. Key-value pairs are stored where key is a string. Values should be serialized before storing which can be done using JSON.stringify() while deserialized using JSON.parse() method. sessionStorage limits the storage till the session exists. If a site stores something in your localStorage, the data is available even when you next time visit the site.

localStorage["path"] = viracct.png;
localStorage.path = viracct.png;

You can use other attributes of Storage object as well like- length: total key-value pairs currently in storage, key(n): name of nth key. getItem(key), setItem(key, value) and removeItem(key) can also be used for storing, retrieving and removing from storage like:




null is returned when either a mentioned key does not exist while calling getItem() or removeItem(), or when n exceeds total number of pairs in key(). To empty the complete Storage use clear().

In Developer Tools under 'Storage' tab you can view all the key-value mappings stored (shown in diagram above). On left hand side click on 'Local Storage' or 'Session Storage' to see the mappings under the respective Storage. To delete a pair, select it by clicking and press the delete cross mark. You can select multiple rows at a time for deletion.

Isn't it indeed nice?

1 comment:

  1. Every new Apple mobile device and every new Mac — along with the latest version of Apple’s Safari web browser — supports web standards including HTML5

    Now its going to be really more interesting after some of it's bug get rectified.Still it is wonderful I am also looking forward to do some things on HTML5