Cordova/Phonegap/Ionic App - local store of remote images

Question

I'm building an app using Ionic/AngularJS and would pull down remote data (JSON) on app start.

For examples sake:

[{"id":1,"name":"Retriever","image":"http://server.com/images/image1.jpg"},
{"id":2,"name":"Collie","image":"http://server.com/images/image2.jpg"},
{"id":3,"name":"Poodle","image":"http://server.com/images/image3.jpg"}]

This data has a number of images -

What is the recommended way to store these locally on the device (and update the filepaths in the JSON as this is used for filtering display data on views) allowing for offline viewing?

Answer 1

Solution 1

Use $cordovaFile service from ngCordova - http://ngcordova.com/docs/ (looks like you will need downloadFile method of this service)

Solution 2

Use this Cordova plugin - https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md (This plugin implements a File API allowing read/write access to files residing on the device.)

Essentially, solution 1 is just a Angular wrapper for this File API.

Solution 3

Store images in Local Storage, but it's very limited due to you have size limit of like 5 Mb. Also storing images in storage like this is generally bad idea.

Solution 4

Use WebSQL as alternative to Local Storage.

---

I personally would go with solution 1.