HTML5 has introduced two mechanisms for storing structured data on the client side, similar to HTTP session cookies. HTTP cookies have 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 their scope and lifetime.

Local Storage

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


Session storage is per-page-per-window and is limited to the lifetime of the window.
Programming Web Storage
Store Item
localStorage.someid = 'somevalue';
//or
localStorage.setItem('someid', 'somevalue'); 

sessionStorage.someid = 'somevalue';
//or
sessionStorage.setItem('someid', 'somevalue');
Retrieve Item
var value = localStorage.getItem('someid');
//or
var value = localStorage.someid

var value = sessionStorage.getItem('someid');
//or
var value = sessionStorage.someid
Remove Item
localStorage.removeItem('someid');
sessionStorage.removeItem('someid');
Clear Storage
localStorage.clear();
sessionStorage.clear();
Now let’s see this in an example. In this page, there is two text boxes to insert ID and Value.

image
Input

First, we check whether the browser supports web storage. You can find the browsers and the versions that support Web Storage here.
var isWebStorageSupported = false; 

window.onload = function ()
{
    if (typeof (Storage) !== "undefined") {
        //your browser supports web storage.
        isWebStorageSupported = true;
    }
    else {
        //your browser doesn't support web storage.
        isWebStorageSupported = false;
    }
}
Now if the browser supports web storage, insert values and store them in local storage as well as in session storage.
//check whether the browser supports web storage and
//and insert to local storage
function insertToLocalStorage(id, value) {
    if (isWebStorageSupported) {
        if (id != "" && value != "") {
            localStorage.setItem(id, value);
            alert("Saved on Local Storage");
        }
    }
}
//check whether the browser supports web storage and
//and insert to session storage
function insertToSessionStorage(id, value) {
    if (isWebStorageSupported) {
        if (id != "" && value != "") {
            sessionStorage.setItem(id, value);
            alert("Saved on Session Storage");
        }
    }
}
Retrieve the items stored in both local storage and session storage. Check the data in web storage in the same browser session, and after closing and reopening the browser.
//check whether the browser supports web storage and
//show all items from local storage
function getAllFromLocalStorage() {
   if (isWebStorageSupported) {
       for (var i = 0, len = localStorage.length; i < len; i++) {
           var key = localStorage.key(i);
           var value = localStorage.getItem(key);
           alert(key + "=" + value);
       }
   }
}

//check whether the browser supports web storage and
//show all items from session storage
function getAllFromSessionStorage() {
   if (isWebStorageSupported) {
       for (var i = 0, len = sessionStorage.length; i < len; i++) {
           var key = sessionStorage.key(i);
           var value = sessionStorage.getItem(key);
           alert(key + "=" + value);
       }
   }
}
After checking, local storage is not becoming empty even after closing and re-opening. But session storage is becoming empty when the browser is closed.

To clear the local storage and session storage explicitly, you can use the following method.
//clear all items from session and local storage
function clearStorage()
{
    if (isWebStorageSupported) {
        sessionStorage.clear();
        localStorage.clear();
        alert("Local and Session Storage Cleared.")
    }
}
Here is 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.
 
Local Storage
Session Storage

The full sample is on the MSDN Code Gallery. Do check it out.
Download Sample

Happy Coding.