Click here to Skip to main content
15,605,987 members
Articles / Web Development / HTML5
Technical Blog
Posted 12 Feb 2011


5 bookmarked

Use HTML5 LocalStorage in your Mobile Web Applications

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
12 Feb 2011CPOL1 min read
Use HTML5 LocalStorage in your Mobile Web Applications

LocalStorage or DOM Storage provides Web pages with the ability to store named key/value pairs locally. This storage is different from the browser cookies. In some systems, it allows Web applications to store from 5MB to 10MB of application data. Unlike cookies, this data is not posted back to the server. It remains locally on the device, and it is persisted even after navigating to another site or closing the browser. Like cookies, this data can be removed if the user clears the browsing history.

This storage is ideal for Web mobile applications that do not require a lot of data storage, and all the data access can be done with scripting objects. When using the local storage, you should consider the following:

  1. Validate that the local storage is available. This is available on browsers that support HTML5 and IE8+. Devices like IPhone, Android and BlackBerries support HTML5. Windows Mobile 7 may be getting HTML5 support in the middle of 2011.
  2. For the keys, use a namespace that differentiates the Web applications in the same domain and append a unique token for that record.
  3. Always check that the storage limit has not been reached. This exception would be raised when adding new items.

Simple data provider to illustrate the ability to add and read values from the Local Storage:

og.Data.Storage = {
    isSupported: function () {
        try {
            return ('localStorage' in window && window['localStorage'] !== null);           
        } catch (e) {
            return false;
    Add: function (key, value) {
        try {
                localStorage.setItem(key, value);
                //or localStorage[key] = value; //like associative arrays
            } catch (e) {
                return -1;
    Get: function (key) {
        return localStorage.getItem(key);
        //or localStorage[key];

This simple data provider implementation can be used to test if the localStorage is available. It also supports Add and Get methods. To use the provider, you could write a simple script as follows:

if (og.Data.Storage.isSupported()){
    og.Data.Storage.Add("myapp.key1","value 1");   //notice the key name
    og.Data.Storage.Add("myapp.key2","value 2"); 
    var val1= og.Data.Storage.Get("myapp.key1");
    var val2= og.Data.Storage.Get("myapp.key2");

If you need data storage for small Web apps, this may be something to look into.

This article was originally posted at


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Architect OG-BITechnologies
United States United States
Software engineer, author & speaker who enjoys mentoring, learning, speaking and sharing with others about software development technologies. Microsoft MVP.

My Blog

Comments and Discussions

-- There are no messages in this forum --