Storage options (ionic storage, capacitor, localForage, ...)

Hi,
I’ve run into issues regarding data storage and would appreciate some feedback.

So far I’ve been using the capacitor storage API.
My app will need to store a few dozen, maybe up to a 100 mb. Huge blobs of static text that need to be read very infrequently.
On mobile, capacitor uses SharedPreferences and UserDefaults. Both should be able to accommodate this.

Currently, the app targets only ios and android. But during development, I’m working in the browser. Here capacitor uses localStorage and I think I’m now running into a storage cap:

DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of '_cap_test' exceeded the quota.

My app is built with React, Ionic v5 and Capacitor. What options do I have, to store large files?
I’ve done some searching:

  • ionic storage, sounds awesome. But apparently only works with angular projects. There’s an issue for this on the ionic github, it has been resolved with the recommendation to use the capacitor storage API. This is not really a solution though, since capacitor storage is very limited in the web.

  • community capacitor plugin. This plugin exposes the API I need and the repository looks very clean. But it’s maintained by just a single person. Data storage is absolutely critical for my app, I’m hesitant about adding this dependency.

  • localForage is a convenience wrapper around IndexedDB or WebSQL. Like the capacitor plugin above, this exposes a very convenient minimal API. How would this work in capacitor? How does Capacitor treat the WebSQL API ?

  • Capacitor Filesystem. This one does not have a convenient API and would make my code a little more complicated. On the web it uses IndexedDB.

Did I miss anything?
Out of these options, I think I would prefer localForage, but I have no idea how this would work with Capacitor. I want to avoid running into other storage issues down the road.

Is there an approach that you would recommend?
Currently I think I might go for localForage and if it doesn’t work on mobile I’ll write a thin abstraction layer that switches between capacitor get/set and localForage get/set. The APIs really look basically identical.

1 Like

Feedback on this would still be highly useful.

The capacitor 2 release mentioned ~20 updated plugins. Anything regarding storage?

Any news regarding this question? I am not working with data bigger than 1mb, but still, I am facing a problem with local storage when I build the apk on the device, it doesn’t work. Any suggestion?

I use Ionic Storage, but I (unlike OP) use Angular.

1 Like

@ajro
is a convenience wrapper around IndexedDB or WebSQL. Like the capacitor plugin above, this exposes a very convenient minimal API. How would this work in capacitor? How does Capacitor treat the WebSQL API ?

Re: community capacitor plugin It also uses internally as a helper to: localForage:

And finally, it would be nice if you take a look at the API: IndexDB directly and try it. Finally, it is Web technology:

1 Like

Is it possible to use Capacitor Storage and Ionic Storage in the same file ?
I tried and i have this error :

Duplicate identifier 'Storage'.

import { Storage } from '@ionic/storage';
import { Storage } from '@capacitor/storage';

Yes, you can rename imports as documented here. I am having a very hard time imagining why one would want to do this, but I trust you have that part covered.