Mobile HTML5 Application Local Storage

问题:

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?

回答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.

回答2:

for example:

var data = {
  name: 'x',
  transect_color: 'red'.
  .....
  ..
};

localStorage.setItem('mydata', JSON.stringify(data));  // mydata is the name of storage

And to get the data you can try like following:

var temp = localStorage.getItem('mydata');

if(temp != null) {
  var dataJSON = JSON.parse(temp);
}

If you want to clear your localStorage data then user following:

localStorage.clearItem('mydata');

You can store multiple numbers of data like following:

var x = [];  // take an array to store all data

x.push({a: 'x', b: 'y'});

localStorage.setItem('mydata', JSON.stringify(x));

// for further entry

var temp = JSON.parse(localStorage.getItem('mydata')); // retrieve localStroage item

temp.push({a: 'xx', b: 'yy'})  // push new data to array

localStorage.setItem('mydata', JSON.stringify(t)); // overwrite the existing entry with new data

console.log(JSON.parse(localStorage.getItem('data'))); // you will see your all data here

回答3:

It's not a good idea to store large data sets in localStorage.

WebSQL is deprecated. IndexedDB is the tool of choice for larger in-browser data sets but is not yet available in PhoneGap (though it's supposedly on the road map).

Counter-intuitively, even though WebSQL spec will not be developed further WebSQL is still the most widely supported option out there, whereas IndexedDB is still very nascent.

If you go the localStore route, as with mobile you should trust the in-memory representation whenever possible and only read from "disk" when you can't from memory.