Jaliya's Blog: Introduction to HTML 5 Web Storage

Thursday, May 9, 2013

Introduction to HTML 5 Web Storage

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.

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 My page I am two text boxes to insert Id and value.

Input

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.

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, I am inserting values and storing these 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");
        }
    }
}

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.

//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, 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.

//clear all items from session and local storage

function clearStorage()
{
    if (isWebStorageSupported) {
        sessionStorage.clear();
        localStorage.clear();
        alert("Local and Session Storage Cleared.")
    }
}

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.