Building Web Pages with Local Storage

Key Takeaways

• Web Storage, also known as Local Storage, in HTML5 enables data storage in the user’s browser, improving performance by reducing the need to transfer data between the server and the client. This data persists even if the user closes the browser, navigates away from the website, or restarts their browser.
• Major browsers such as IE8+, Firefox 3.6+, Opera 10.5+, Chrome 5+, Safari 4+, iOS 3.2+ and Android 2.1+ natively support web storage. However, the data is stored at different locations on disk depending on the browser.
• Each domain and subdomain has unique web storage limited to a domain. Web storage is accessed via the localStorage object, storing data in key/value pairs. Before working with localStorage, it’s crucial to check if the browser supports it using the Modernizr JavaScript library.
• While web storage is a great addition to building websites, it’s important to keep the data as lightweight as possible. For older browsers that don’t support web storage, a good fallback is to store the data inside a cookie.

Storage – when you’re building or renovating a house, storage is something you need. The more the better. This same principle applies to building websites; you need to store data somewhere.

Traditionally this has either been stored on the server using sessions or cache, but moving forward, there’s Web Storage, AKA Local Storage or Session Storage. Web Storage in HTML5 allows you to store information in the users browser. As far as I’m concerned, this is a game changer. Moving storage from the server improves performance by alleviating the need to transfer data between the server and the client. This article will focus on local storage, not session storage.

Web Storage is similar to HTTP cookies. Data is stored in the browser even if the user closes the browser, navigates away from your website, or restarts their browser. The biggest difference though is Web Storage isn’t transferred to the server on each request. Another difference is web storage doesn’t expire, unless you explicitly tell it to.

What’s The Difference Between Session and Local Storage?

The difference between session and local storage is local storage persists even if the browser is closed. Session storage data is not persisted beyond a session, so if you close the window or tab, the data disappears. But, while you’re shopping, the data in one window will be kept completely separate from that in another window if the site leverages the session storage data store.

Who Supports What?

Currently the major browsers support web storage natively. Here they are:

• IE8+
• FireFox 3.6+
• Opera 10.5+
• Chrome 5+
• Safari 4+
• iOS 3.2+
• Android 2.1+

This is always changing, so a good place to keep up to date on which browsers support what, you can check out quirksmode.

Where’s the Data Stored?

Wouldn’t the web be a wonderful place if everything was the same? Web storage is stored at different locations on disk depending on which browser you’re using. I couldn’t find the exact locations for all of the browsers, so if you read this and you do know, please write a comment letting us know where it’s stored.

IE8+ – %userprofiles%/Local Settings/Application Data/Microsoft/Internet Explorer/DOMStore. There’s an XML file which contains the data

Firefox – data is stored in the webappsstore.sqlite file in the profile folder. There are some Firefox addons you can download to view the contents.

Chrome –
Windows XP – C:Documents and Settings%username%Local SettingsApplication DataGoogleChromeUser DataDefault
Vista/7 – C:Users%username%AppDataLocalGoogleChromeUser DataDefault
Safari – data is stored in the sqllite file in C:Users%username%AppDataLocalApple ComputerSafariLocalStorage. There’s a localstorage file named the same as the website storing it.

Web Storage and JavaScript

Each domain and subdomain has unique web storage. Web storage is limited to a domain, so if any members of the web storage object are accessed by scripts whose origin is not the same origin of the Document object, a SecurityError is thrown.

Access to web storage is via the localStorage object. This returns a Storage interface. This interface has a number of functions available to manipulate the web storage. Data in the web storage is stored in key/value pairs, so you can store strings, but most likely you’ll want to store a JSON object. Unlike the sessionStorage interface, localStorage persists data when the user closes the browser, or when they open multiple tabs or windows.

Before working with localStorage, you need to check if the browser supports it. You can write this manually, but a better way is to use the Modernizr JavaScript library. Modernizer checks browser features for you so you can concentrate on getting on with your work. Modernizr can be downloaded from here.

Starting at the beginning, check to see if localStorage is available.

if (Modernizr.localstorage) {    
    $("#result").text('localStorage is available');
} else {    
    $("#result").text('localStorage is not available');   
}

The sample code can be found here.

To add data, you can use the setItem function, add a new value via array syntax, or create a new property.  The following sample adds data in the three ways.

if (Modernizr.localstorage) {    
    var localStore = window.localStorage;
    localStore.setItem["Country"] = "USA";
    localStore["Country"] = "USA";
    localStore.Country = "USA";   
    $("#result").text(localStore.Country);
} else {    
    $("#result").text('localStorage is not available');   
}

The sample code can be found here.

If the size of the data is too big, an Out of memory error will be thrown. To avoid this error, a good idea is to check what space is available via the remainingSpace function. This return an integer value that has the remaining disk or memory quota.

if (Modernizr.localstorage) {
    var localStore = window.localStorage;
    if (localStore.remainingSpace > 0) {
        // you have space to do work
    }
} else {
    $("#result").text('localStorage is not available');
}

The sample code can be found here.

Update

I forgot to mention this, so here’s an update. The remaingSpace function is available in IE. The IE
team have put this method forward to the W3C, but so far it hasn’t made it into the specification.
A better way to check to see if you can add a piece of data is to add a try/catch around the piece of
code that sets the storage. As expected, each browser throws a different error. Here’s the code I
used to fill the local storage.

if (Modernizr.localstorage) {
var localStore = window.localStorage;
localStore.RandomData = "Random";

for (i = 0; i < 100; i++) {
var data = localStore.RandomData;

try {
localStore.RandomData = data + data;
} catch (e) {
$("#errorMessage").text(e.name + ' - ' + e.message + ' - ' + i);
break;
}

}
localStorage.removeItem("DATA");
} else {
$("#result").text('localStorage is not available');
}

And here’s the results error name followed by the error message for each browser.

Firefox 7.0.1

NS_ERROR_DOM_QUOTA_REACHED – Persistent storage maximum size reached

IE9

Error – Out of memory

Safari 5.1.1

QUOTA_EXCEEDED_ERR – QUOTA_EXCEEDED_ERR: DOM Exception

Chrome 15.0.874

QUOTA_EXCEEDED_ERR – QUOTA_EXCEEDED_ERR: DOM Exception

The sample code can be found here. On a side note, IE9 would stop responding for me on this page,
so the only way to test this was to create a separate page on my personal website. It’s the same
code and you can visit it here.

Removing data from localStorage is easy too.  Calling removeItem removes an item from the storage.

if (Modernizr.localstorage) {
    var localStore = window.localStorage;
    localStore.Country = 'USA';

    if (localStore.Country) {
        localStore.removeItem("Country");
    }
} else {
    $("#result").text('localStorage is not available');
}

The sample code can be found here.

Reading data from storage can be done via array syntax, or by the property.

if (Modernizr.localstorage) {
    var localStore = window.localStorage;
    localStore.Country = "USA";

    if (localStore.Country) {
        $("#result").text(localStore.Country);
    }
} else {
    $("#result").text('localStorage is not available');
}

The sample code can be found here.

Putting It All Together

Web storage is great, if the browser supports it. For older browsers, they won’t support web storage, but they will support cookies. A good fallback is to store the data inside a cookie if web storage isn’t available. The following example does just that.

$(function() {
    $("#write").bind("click", function() {
        if (Modernizr.localstorage) {
            // your browser supports localStorage
            var localStore = window.localStorage;
            localStore.Country = "USA";
        } else {
            // your browser doesn't supports localStorage
            // write to a cookie
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + 365);
            var cookie = "USA" + "; expires=" + exdate.toUTCString();
            document.cookie = "Country=" + cookie;
        }
    });
    $("#read").bind("click", function() {
        $("#result").text("");
        if (Modernizr.localstorage) {
            // your browser supports localStorage
            var localStore = window.localStorage;
            $("#result").text(localStore.Country);
        } else {
            // your browser doesn't supports localStorage
            // write to a cookie
            var cookies = document.cookie.split(";");
            for (i = 0; i < cookies.length; i++) {
                x = cookies[i].substr(0, cookies[i].indexOf("="));
                y = cookies[i].substr(cookies[i].indexOf("=") + 1);
                x = x.replace(/^s+|s+$/g, "");
                if (x === "Country") {
                    $("#result").text(unescape(y));
                }
            }
        }
    });
    $("#remove").bind("click", function() {
        if (Modernizr.localstorage) {
            // your browser supports localStorage
            var localStore = window.localStorage;
            localStore.removeItem("Country");
        } else {
            // your browser doesn't supports localStorage
            // so remove the cookie
            var cookies = document.cookie.split(";");
            for (i = 0; i < cookies.length; i++) {
                x = cookies[i].substr(0, cookies[i].indexOf("="));
                y = cookies[i].substr(cookies[i].indexOf("=") + 1);
                x = x.replace(/^s+|s+$/g, "");
                if (x === "Country") {
                    var cookie = 'USA; expires=Thu, 01-Jan-70 00:00:01 GMT;';
                    document.cookie = "Country=" + cookie;
                }
            }
        }
    });
});

The sample code can be found here.

Web storage is a great addition to your armor when you need to build a great website. Storing data on the client reduces the amount of memory that’s needed on the server, and it also brings the data closer to the user, which means better performance. How much better, well that all depends on how much data you’re storing. But the common sense rule applies; don’t stick huge amounts of data in web storage.  Keep things as lightweight as possible. Your users will thank you in the end.

Frequently Asked Questions about Building Web Pages with Local Storage