Best data persistence for Angularjs/Javascript Apps on PhoneGap?

Kevin Baker picture Kevin Baker · May 17, 2014 · Viewed 24.3k times · Source

I am looking to find best practices for Angularjs data persistence on a PhoneGap app. I'm using Ionic Framework on top of this, but not relevant to this question as it is just built on top of Angular & Cordova.

I like that Angular remains flexible on data persistence solutions, it makes sense since it is a web framework not specifically a Hybrid app framework... would love to know how people are solving this.

Here's an overview:

Requirements

  • Add local database to app build for preloaded data. This will be over the 5MB data limit.
  • Load data from local database on startup.
  • Saving updated data to local data store for persistence.
  • Prefer schema-less if possible.
  • Simple query interface. I could load all the data into memory and just use standard Angular filters for this, provided the performance was decent.
  • Object query interface... something like an ActiveRecord-like ORM rather than having to write SQL in my app.
  • Future proof. I don't want to reinvent the wheel every time I am building an app that needs data persistence. Also would like to choose something that is more standard if possible so I can continue to use it in the future... something like Indexeddb would make sense here.

Options

I've been looking at the following options. Can you provide any feedback on any of these?

  • Breezejs - Looks more focused on server. Is there an SQLite interface?
  • YDN-DB - Seems like an option, but also seems a little obscure compared to some of the other options.
  • JayData - Is this still active? Concerned about commercial aspect of it.
  • Persistencejs - This looks promising. Is the project still active?
  • ngStorage - is this just a localStorage interface? Does it solve the 5M limit?
  • Angular-cache - Can I have data to pre-load with this? How long can I persist data?
  • localForage - don't know much about this. Does it solve the 5M limit?
  • Pouchdb - concerned about query language. does not solve 5M restriction
  • Couchdb Lite - concerned about query language.
  • WebSQL - I don't to use this since it seems like it is on the way out.. plus 5M limit.
  • Indexeddb - There is a shim that builds compat-layer for most major browsers. 5M limit. If I could use this on top of Sqlite that would prob be a winner for me since more standards based.
  • Store in json file - Just use plain old objects and then use Phonegap file api to load and store serialized data. Seems like a pain to have to serialize all the data every time we want to save... but an option so long as I can use Angular filters.

Sorry for the long post. I really would like to see some thoughts on best practices. Would love an Angular Way to handle large data persistence on Hybrid mobile apps.

Thanks

Answer

nlawson picture nlawson · May 19, 2014

PouchDB dev here. Obviously I'm biased, but here's my take:

  1. The best way to get around the storage quotas in PhoneGap/Cordova is to use the SQLite plugin for iOS/Android. The performance also tends to be better, especially on Android. (Edit: in modern post-Kitkat Android, it's actually worse.)

  2. WebSQL has a nice query language, but you want to be future-proof, i.e., not chain yourself to a dead standard. There's also Windows Phone and Firefox OS to consider.

  3. So if you use PouchDB and install the PhoneGap plugin, it'll work cross-browser and you'll avoid the storage limit on iOS/Android. Win?

Also, it's my personal experience that Angular fits with PouchDB like PB&J, since Angular deals with straight-up JSON objects and so does Pouch. (Compare this to Ember and Backbone, which have custom classes that you have to export to/import from JSON – it's a little trickier.)

Good luck with whatever you choose!