Local data with web storage

HTML5 Storages:

1. Web storage: It's currently the most widely supported option.

2. Web SQL database: It's support is extremely limited and it might be left behind in favor of other options.

3. indexedDB: As a non-relational (NoSQL) database, it provides simplicity that's similar to web storage while still accomodating common needs such as indexing and transactions.

4. Filesystem API: This is useful to store large data types such as text files, images, and movies. However, there is a lack of support by many modern browsers.


The localStorage global variable is a Storage object. It's essentially a NoSQL store.

Currently W3C recommands 5MB limit, but is't ultimately up to the browsers to determine how much they will allow. If the storage limit is reached, or if the user manually turns off storage, then a QuotaExceededError exception is thrown.

Currently only string values can be stored. however, JSON can be used to store complex object.

  • To check browser support

    function isWebStorageSupported(){ return "localStorage" in window};

    The popular JS library, Modernizr, comes with a method that could do this check as well. if(Modernizr.localStorage){ ... };

  • setItem(key, value)

    localStorage.setItem("firstName", "SpongeBob");

    - or - localStorage["firstName"] = "SpongeBob";

    - or - localStorage.firstName = "SpongeBob";

  • getItem(key)

    var firstName = localStorage.getItem("firstName");

    - or - var firstName = localStorage["firstName"];

    - or - var firstName = localStorage.firstName;

  • removeItem(key)

    Remove a value by using the associated key. localStorage.removeItem("firstName");

  • clear()

    Method to remove all items from storage. localStorage.clear();

  • length

    A property that gets the number of item currently being stored. var itemCount = localStorage.length;

  • key(index)

    Method that finds a key at a given index. Some browsers will throw an exception if an out-of-range index is used, so check the length before using this method. var key = localStorage.key(1);

  • Secutiry

    Data being stored is tied to the URL (the same host, port, and protocol) to ensures that it can't be accessed by other sites. Any sub-site within the domain would be able to access data.

    This security feature applies to all different types of storage available in HTML5.


sessionStorage is also a storage object just like localStorage. They have the same methods and properties. The difference is that sessionStorage retains data for a single session only.

One of the biggest issue with Storage object is that it operates synchronously, which can block the page from rendering while read/wrotes occur.

Also, searching large data sets can be time consuming because web storage does not have inddexing features.


HTTP cookies provide a convenient wat to store small bits of information.

Cookies are limted to about 4 KB of data and you can create between 30-50 cookies per site.

Every cookie is sent with each HTTP request/response regardless of whether the values are needed or not.

  • To set a cookie

    var expirationDate = new Date();
    // set expiration 7 days from today
    expirationDate.setDate(expirationDate.getDate() + 7);
    var cookieValue = "SpongeBob";
    var cookieName = "firstName";
    document.cookie = cookieName + "=" + cookieValue;

  • To get a cookie value

    var cookies = document.cookie.split(";");
    for(var i = 0; i < cookies.length; i ++)
        var cookie = cookies[i];
        var index  = cookie.indexOf("=");
        var key    = cookie.substr(0, index); 
        var val    = cookie.substr(index + 1); 
        if(key == "firstName")
            return val;

  • Using the jQuery cookie plug-in

    $.cookie("firstName", "SpongeBob");
    var firstName = $.cookie("firstName");