Data storage offline

Ionic Framework
1

Hey folks,

Ok total newbie here, so bare with me. I have a few basic questions/queries about data storage.
so to keep it simple ill use an example app.

I downloaded a quiz app, and signed in, and then put my phone on airplane mode (to kill connection). I played 5 games, and the app had a page of total stats (IQ etc).

I then closed the app, and restarted my phone, and while still in airplane mode, I opened the quiz app…i did not need to login again, and it had kept my history of stats.

How has it done this?

I know localStorage wont work here, as it erased when closing. I want to make a similar app, as its my first attempt, and i want to store data in the same way. Ive been through many many articles/stack/forums, and i have seen things like CouchDB(with PouchDB), sqlLite, ionicStorage etc etc. So for the above example, can someone point me in the right direction of how this is done please? i am using firebase, which is fine for a connection, its just this offline storage i’m confused about.

also, after the 10th quiz, the app asked me to download the next section. how is this done, as in where is that content saved? in the app or my device?

thanks,
Joey

2

Why wouldn’t localStorage work?

Closing the app and and restarting the phone does not clear localStorage. You have to manually clear the data and cache (on Android at least) in Settings > Apps in order the delete an app’s localStorage (short of uninstalling the app, of course).

Also, Firebase has a local cache that allows it work also in offline mode, which is probably why the app remembered you were logged in even in airplane mode.

3

Oh I thought localStorage was gone on mobile, read that somewhere…
So I also read that ‘the device, can delete your localStorage if it needs to free space for main tasks (specifically android)’…would this be correct? (so there would be a chance it could be removed)

Ok cool, ill look into firebase, used that briefly before for web work, so be open to that.

thanks

4

I misspoke: everything I said about localStorage, I was in fact referring to IndexDB. But the principle is the same: you don’t erase the data by closing the app.

Yes, data can be deleted if low on “disk” space. The rules for what and when to delete vary between browsers.

A library like localForage helps a lot, as it automatically tries to select the best storage, based on the available options on any given device.

5

All of this is true, but if you just use Ionic Storage, you don’t have to concern yourself with the details.

6

Thanks for the help folks.

So if i’ve understood the docs right…ionicStorage is essentially a wrapper, that ‘picks’ the best available (with sqlLite priority) ??

and leveraging off localForage, it allows you to store arrays/objects etc ?

So if an app just kept a user object with stats (say 20 key/value pairs updated after each game), and some settings the user set…would you need any kind of database, such as firebase, or would IonicStorage be enough?

thanks

7

IonicStorage will more than suffice for such a simple use case.

@rapropos I didn’t know about Ionic Storage, so a couple of questions:

  • Will installing IS automatically install SQLite for you as well, or is a that a separate installation and configuration?
  • Reading the docs, I take it IS still stores key/value pairs even if it uses SQLite?
8

thanks @accron, Ok well IS seems like the way to go then…altho im using firebase, and it seems offline mode is ‘built in’ with that. so ill have to look more into that, maybe use IS for small pieces, and firebase for main user stats object.

quick additional query… @rapropos your link was to a package called ionicStorage, in reading docs i came across nativeStorage. is the only difference is ionicStorage will work on web…or is there more to it then that?

9

That’s one difference. A corollary is that Native Storage uses (as the name implies) security measures that aren’t available in a browser (such as storing stuff in places the native OS protects with the device lock code).

Separate and optional.

Correct. If you need a full relational database, you need to be dealing with SQLite directly.

10

@rapropos thanks for helping to clear some of that up.
I know where to look/read now, so ill crack on and see how i do, thanks folks

11

@JosephOR…just stumbled across this, and I thought I would mention that I have converted all of my apps that utilize off storage from the ionicStorageModule to use Capacitor::FileSystem instead.
I have found the implementation is way more reliable, and flexible all while utilizing native code (ios and android) to gain the extra benefits that native code has over plugins/polyfills…
Capacitor is written and maintained by the Ionic team, and here is a link to the FileSystem docs I mentioned earlier (https://capacitor.ionicframework.com/docs/apis/filesystem/)
And for what it’s worth, feel free to reach out if you have any questions about implementation, I would be glad to help you work through them.
Cheers,

  • c
12

Hey @chusting,

Thanks for jumping in the info. I’ll have a look into that so. Ive re-thought how some data needs to be saved, and for now it looks nativeStorage, and firestore will work for me…but i will still investigate fileSystem…ill be in touch if I dive deeper into it.

Thanks again