When it comes to storing data on the iOS and Android devices, there are several options available within the context of the JavaScript forms script. 


Web based HTML5 Storage

Web Storage (localStorage and sessionStorage)

Since the iOS and Android clients use HTML5, forms can access HTML5 features, such as Web Storage, or more specifically - localStorage and sessionStorage. Items stored in localStorage will persist if the app is completed, closed, and restarted again whereas sessionStorage is more temporary and will not persist if the app is completed and closed (not just suspended). LocalStorage and sessionStorage use key - value pair methods for saving and retrieving string content. There are numerous HTML5 resources online regarding these two options but here are some basics. Both localStorage and sessionStorage have the same methods so we'll use localStorage in these examples.


 

localStorage.setItem("MyDataKey", "MyDataValue is here");

var value = localStorage.getItem("MyDataKey");

 

In the above example, the value of value will be "MyDataValue is here".


It is important to note that the localStorage and sessionStorage areas are accessible to the entire app - not just the form. This space is also shared with some databases and other data for the app. Also, the amount of space is dependent upon the device but in general, most devices have 5MB. 


HTML5 Relational Databases

HTML5 offers other storage possibilities such as IndexedDB and Web SQL Database. IndexedDB is not supported by iOS so Web SQL Database offers more in terms of compatibility.


PhoneGap / Cordova based Storage

PhoneGap File API

Since the iOS and Android Clients also use PhoneGap (or Cordova), forms can access PhoneGap features, such as the File API. The PhoneGap documentation has numerous examples and other resources for using the File API. As the name suggests, the File API is a folder and file based interface to the actual folder and file structure of the device, but isolated to just the app. The advantage to using the PhoneGap File API is that it is not limited to 5MB as localStorage is. The amount of storage space is limited by the amount of storage space available on the device.


With the File API, there are many different options so this example just scratches the surface:


  

    function gotFS(fileSystem) {
        fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.file(gotFile, fail);
    }

    function gotFile(file){
        readDataUrl(file);
        readAsText(file);
    }

    function readDataUrl(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read as data URL");
            console.log(evt.target.result);
        };
        reader.readAsDataURL(file);
    }

    function readAsText(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read as text");
            console.log(evt.target.result);
        };
        reader.readAsText(file);
    }

    function fail(error) {
        console.log(error.code);
    }

    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail); 

  

For further elaboration, please refer to the PhoneGap documentation on the File API: http://cordova.apache.org/docs/en/3.1.0/cordova_file_file.md.html#File