HTML5 Local Storage and Offline Application Cache

I spent some time on searching for a 'one script fits them all' solution for the new HTML5 feature 'Local Storage'. The idea was that any form in my application should be able to store its data in the local storage. The forms should also be repopulated out of the storage when coming back to a page.

At the end of the data entry I wanted to have a 'review' screen which was a form itself being populated from the local storage. Here the user should be able to submit the data.

Planing to this point made me aware that I was actually just 'minutes away' from setting up my first 'real' web application. All I needed to do now was to add another HTML5 feature 'Off line
Application Cache' and I would have a data collection system which could be used off-line. The user would gather his/hers information off line storing it into the local storage and sync it with the server once he/she was on line again.

In the first part of this blog I will share the script that I used to automatically build a Java Script object which has the input field ids as properties and the value of the input field itself.

Jquery and JSON-JQeuery

I use Jquery for all of my work. It is simply fantastic. I soon ran into issues with saving objects in the local storage because they seemed to be returned as a long string once I got them out of the local storage. To have (more) control over this I started using the JSON Jquery library. That way I could store my obects as JSON strings in the session and I could rebuild my objects from those string easily.

Couple of things ...

The form itself needs to play along some standards:

• It needs to have a hidden input field stating the name of the form. This name will be used to store the JS Object in the local storage under a specific name
• The input field fields, select lists and other elements which values are supposed to be stored in the local storage need to have a class 'localStorage' assigned.
• In my case I have a list of navigation buttons which have the class 'nav' assigned. Clicking on one them will trigger the actual storing process. This is what anyone needs to change around a bit who would like to re use this script.
  

This script will save all your form values in the local storage and will populate your form out of the local storage once the page is loaded.

$(document).ready(function()
{

 //checking which form we are working with...
 var form = $('#localStorageObject').val();
 //is there already an object of the name saved in 'form' in local storage?
 if (localStorage.getItem(form))
 {
   //if so get it and put into its own object. The line below creates a new object of the same name
  window[form] = $.evalJSON(localStorage.getItem(form));
   //and populate the form by walking through that object and grabbing the keys and values
   $.each( window[form], function(k, v)
   {
     //grabbing the right input field on the form and populate it with the value (v)
     $('#'+k).val(v);
   });
 }else
 {
 //if not create it ...
 window[form] = new  Object();
 }
 //we are selecting all elements on the screen which have a class of 'localStorage'

 $('.nav').bind('click',function (e)
   {
        $("*[class~=localStorage]").each(function(index)
          {
            //now we are taking the id of the element ...
                  $property = this.id;
                 
                  //and create a property of the same name as the id for our objec
                  window[form][$property] = '';
                  window[form][$property] = $('#'+$property).val();
                  //return false;
                  localStorage.setItem(form,$.toJSON(window[form]));
                 
          })
         
 })

 $('#clearStorage').bind('click',function () {
localStorage.clear();
$("*[class~=localStorage]").each(function(index) {
    $(this).val('');
});
})
})