HTML5 has introduced two mechanisms for storing structured data on the client side, similar to HTTP session cookies. HTTP cookies has some drawbacks such as limited to store 4 KB of data etc., Web storage is considered as one of the most rising data storage methods is HTML 5 web applications as well as Windows Store Apps.
Web storage consists of two main web storage types: local storage and session storage, behaving similarly to persistent cookies and session cookies respectively. These two storage types differ from each other based on it's scope and lifetime.
Data placed in local storage is per domain (it's available to all scripts from the domain that originally stored the data) and persists after the browser is closed. That means if you close the browser and check for the data in local storage, it will still be available. There is no expiration date for the data in local storage unless you explicitly delete them. You can access the data in the local storage, may be next day, next month or even after a year.
Session storage is per-page-per-window and is limited to the lifetime of the window.
Programming Web StorageStore Item
Now let’s see this in an example. In My page I am two text boxes to insert Id and value.
First what I am doing is check whether the browser supports web storage. You can find the browsers and their versions which supports Web Storage from here.
Now if the browser supports web storage, I am inserting values and storing these in local storage as well as in session storage.
Then I am retrieving the items stored in both local storage and session storage. I am going to check the data in web storage in the same browser session and after closing and re opening the browser.
After checking, I can see that local storage is not becoming empty even after closing and re opening. But session storage is becoming empty, when the browser has been closed.
To clear the local storage and session storage explicitly, you can use the following method.
Now I am going to give you a little hint about a place where you can see the items in the local storage and session storage in Google Chrome. In the page, go to Inspect element and then go to Resources tab. There you can find the Local Storage and Session Storage.
I am uploading the full sample to my SkyDrive. Do check it out.