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) {
                alert(e.Description);
                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.