Infosys Microsoft Alliance and Solutions blog

« What it means to develop Metro Applications for Windows 8 | Main | Kinect for Windows »

Web Storage in HTML5

Web Storage allows writing information at client side. Using Web Storage data can be written at client side as key value pair. There is no supported query language of Web Storage. Web Storage size varies from 2 MB to 10 MB. Usual size is often 5 MB. Web Storage is different from cookies in term of capacity. Web Storage offers much more capacity than cookies. Unlikely cookies, Web Storage data are absolute client side data. Web Storage data does not go to server with each request hence improves performance of the site.

Web Storage is of two types
1 Local  : This store data for the site
2.Session: This store data for the session.

Local Web Storage stores data in client hard disk. However Session Web Storage stores data in HTTP Session. Session Web Storage data is temporary in nature and persisted only for a particular HTTP session. This data is deleted when user close the browser window.
Web Storage API are supported by below browsers

1. Chrome 4.0 +
2. Firefox 3.0 +
3. Opera  10.6+
4. Safari 4.0+
5. IE 8.0+

A browser supports Web Storage or not can be checked as below, 

<script type="text/javascript">


    function supportsLocalStorage() {


        return ('localStorage' in window) && window['localStorage'] !== null;




    if (supportsLocalStorage()) {

        // Web Storage invocation here



    else {

        alert('Sorry, your browser does not support Web Storage');




A site can display number of visits using local storage as below,

function PageCount() {

        if (localStorage.NumberOfPageHit) {

            localStorage.NumberOfPageHit = Number(localStorage.NumberOfPageHit) + 1;


        else {

            localStorage.NumberOfPageHit = 1;


        document.write("Number of Visited  " + localStorage.NumberOfPageHit + " time(s).");



Web Storage and Cookies
1.Web Storage size is much more than cookies. Maximum size of cookies can be 4Kb         whereas size of Web Storage can be up to 10 MB.
2.Web Storage data is pure client side data and unlike cached data does not travel to       and fro to the sever with each request.
3.Web Storage data need to be deleted programmatically.
4.Unlike cookies, if the Web Storage data needs to be sending to server, it should be       sent programmatically.

Different Web Storage API is as below,
1.Clear  : removes all key/value pair
2.getItem  : retrieve given item for a key
3.Key   :  retrieve given value of key
4.Length : returns total number of key value pair in storage
5.removeItem  : remove an item for given key
6.setItem  : stores key value pair
7.remainingSpace : remaining space in bytes.

Web Storage can be very useful in creating web applications where decent amount of data need to be stored and processed at client side. Web Storage can be accessed only with Java Script so should be refrained in using with critical operations.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Please key in the two words you see in the box to validate your identity as an authentic user and reduce spam.

Subscribe to this blog's feed

Follow us on

Blogger Profiles

Infosys on Twitter