Newbe local storage, Where to start?

ionic-v1
1

Good day to all and thanks for the help.

I need to get a clear idea to were to start learning to get to a point that I am able to do what this App needs to do. I am very comfortable with HTML, Css and Angular, and looking for guidance to tutorials.

I am looking to build an app that is a Local City guide, I has a catalog of restaurants (Around 40) with 1 image and description. It MUST work offline so all my assets (Restaurant images ) and descriptions need to be stored locally, I would love to be able to update on my backend the list and have the app sync to download the latest restaurants along with the assets.

My Questions are:

  • Best way to store the data? .json or go with a dB like indexedDB or sqlLite
  • How to fetch the assets from the server to store locally? cordova file plugin?

Any help, guidance or links to some good tutorials talking about Local storage would be great.

Thanks again and Happy Coding!!!

2

I think localStorage has a 5 MB limit per entry, so if your JSON string is bigger than that, I’d recommend SQLite (ngCordova has a nice service for this).

Personally, when I’ve used SQLite, I simply stored my JSON string to avoid ever having to use SQL queries (other than basic getting/storing of the JSON string).

ngCordova gives you a filesystem service. Just fetch the file from the server and store it using ngCordova.

3

Hi,

Like @jpstone1022 say, it’s better to use SQLite instead of basic local storage.
I’ve built a service to make the use of SQLite easier and more readable in your code : https://github.com/abellion/ngDatabase

4

Thank you jpstone the more I read about it the more inclined I am to do what you say. for the images that I need, if the json has the url path for the images to use and they are downloaded one, will they stay in the cache of the app and will not need to redownload them every time the app is open? that is my main concern, the images. Or should I do a function that downloads and stores them locally for future use? As I mentioned before, the app is a simple local restaurants and business directory.

Thanks again for your help.

Sincerely,

5

I’ve been playing with PouchDB for a while and really like it. It has a super simple API and has offline storage capability. Where this solution really shines is that it can be setup easily to be in constant sync with a cloud-based CouchDB database.

Make a change on the server side, and in milliseconds the mobile device will be updated (of course with an internet/3g/4g connection). Make a change on the mobile app and the change is synced to the CouchDB database.

PouchDB by default uses IndexedDB for storage, but there are several adapters to switch it to WebSQL or LevelDB.

An example of working with this solution below:

// CREATE LOCAL DATABASE
var local = new PouchDB('restaurants');    

// OPTIONAL: URL TO REMOTE DATABASE
var remote = 'http://myURL.com/';

// OPTIONAL: SETUP AUTO-SYNCING TO REMOTE CLOUD DATABASE
PouchDB.sync(local, remote, {live: true, retry: true})
.on('paused', function() {
  refreshMyApp();
}).on('error', function(err) {
  console.log(err);
});

// ADD ITEM TO DATABASE
local.put({
  _id: 'some random ID, maybe a timestamp?',
  name: 'Restaurant Name',
  location: 'Restaurant Location'
}).catch(function(err) {
  console.log('Error: ' + err);
});

The code above will create a local database on the mobile device for offline storage, add an item and replicate that item to the cloud database. Because live:true is set, any changes made to the cloud database will live-update your mobile application when the paused event is fired.

I’ve found that PouchDB plays very nice with Cordova / PhoneGap. I’ve been using this method for the creation of several in-house company applications and so far no problems at all!

EDIT - I should also note that you can store images using this solution as well. See here for more information on that.

Hope this helps!