HMTL 5, CSS3 and JavaScript for Windows 8 – sessionStorage vs localStorage

HTML5 has introduced a new paradigm in the save state or save objects world for HTML5. Unfortunately this is not available for all the browsers yet, but it is available for the whole Windows 8 platform, including apps.

There are two types of Web Storage so far, and these are the localStorage, and the sessionStorage. The main difference is that the localStorage persists over different tabs or windows, and even if we close the browser, accordingly with the domain security policy and user choices about quota limit. The antagonist is the sessionStorage object which follows this rule:

When a new HTMLDocument is created, the user agent must check to see if the document's top-level browsing context has allocated a session storage area for that document's origin. If it has not, a new storage area for that document's origin must be created.

Each Document object must have a separate object for its Window's sessionStorage attribute.

sessionStorage object will not persist if we close the tab (top-level browsing context) as it does not exists if we surf via another tab or window. As summary, as soon as we are in our tab the session storage allows us to save a large amount of key/value pairs and lots of text, something impossible to do via cookie. This is what my implementation is trying to do with browsers that do not implement this special object. If you have doubts, you can directly test the demo link, and come back whenever you want.

To create applications which requiere to remember past data localStorage is our object. For other purposes we can use sessionStorage which at the end of the day is like Session in ASP.NET.