What is HTML5 Web Storage?

LocalStorage

Main features:

   * Data is shared between all tabs and windows from the same origin.

   *The data will not expire. It will remain even after browser restart and survive OS reboot too.

For example, if you execute this code…

localStorage.setItem('localStorage', 1);

And close/open the browser or just open the same page in a different window, then the result would be:

alert( localStorage.getItem('localStorage') ); // 1

We only needs to be on the same origin (domain/port/protocol), the url path can be different.

Since it is shared between all windows with the same origin, hence if we set the data in one window, the change will be visible in another window too.

SessionStorage

Usage of sessionStorage object is much less than localStorage.

Properties and methods are the same, however it’s functionality is much more limited:

  * The sessionStorage exists only within the current browser tab. Another tab with the same page will have a         different session storage.

  * However it is shared between iframes in the same tab (assuming they come from the same origin).

  * The data survives page refresh, but not closing/opening the tab.

for example…

sessionStorage.setItem('sessionStorage', 1);

After refreshing the page, you can still get the data:

alert( sessionStorage.getItem('sessionStorage') ); 
// after refresh: 1

However if you open the same page in another tab, and try again there, the code above returns null, meaning “nothing found”.

That’s exactly because sessionStorage is bound not only to the origin, but also to the browser tab. For that reason, sessionStorage is used less.