Question

A quick overview of what I have, and the problems that are associated with it. I have a HTML5 app that I am going to run as a native app using PhoneGap. It is a small data collection application for the local field research station.

The problem with this field station is that they are prone to loosing a signal to transmit data; thus I want to store the data on the device for later use (or to send it to a server).

Data that needs to get saved is the following:

*User Name (string)
*Transect Color (string)
*Transect Number (int)
*Transect Board (char)
*Salamander Name (string)
*Snount-Vent Length (int)
*Total Length (int)
*Centipedes (int)
*Red-Black Millipedes (int)
*Brown Round Millipedes (int)
*Brown Flat Millipedes (int)

The app itself will be a standalone app, so I want it to have a way to save the data.

What would the best way of doing this be, using a combination of jQuery & HTML5? I know Web SQL is deprecated, but I believe that may be my only way of storing this data. If not, what would be the best way to dynamically store X number of entries before sending?

Thanks for the help.

EDIT:

How about this situation, when the researcher has to do a “Full Transect”…

The researcher must go from location to location until 20 full data collections on each transect had been done. This entails 20 different locations, each with a varying number of salamanders and critters to be entered.

How would you store that much larger set of data, to be offloaded at the end, when localstorage only allows for Key:Value pairs?

Answer 1

I’m a huge fan of wrapping localStorage up in a mini key-value store:

window.storage = {
  store:localStorage,
  get: function( key ) {
    try {
      return JSON.parse(this.store[key]);
    } catch(e) {};
    return undefined;
  },
  set: function( key, value) {
    try {
      this.store[key] = JSON.stringify(value);
    } catch(e) {};
  }
}

This enables you to reference window.storage directly. Assuming you have the fields described wrapped up in a hash called row, you can now serialize directly:

storage.set('myrow', row);

As the data you store in row will be serialized, you could create a document that contains much more information than a single SQL-row might:

var document = {
  property: 'foo',
  nestedArray: [ 'foo', 'bar', 'baz' ],
  nestedObj: { 'key': 'foo', 'key2': 'foo' }
}

storage.set('transectID', document);

…you get the idea. The point is that you can even very rich data will be reduced by JSON.stringify and saved in a recoverable form.