Migration from IonicStorage in Cordova app to Capacitor Storage in Capacitor 3

Capacitor
1

Hi there,
I have ionic 5 cordova app. I am using ionic storage to save user’s credentials and preferences. I want to migrate to Capacitor 3. I am not able to access user’s data created thru ionic cordova app in Capacitor 3 app. Could you please help me.

2

@mhartington
Since no one is replying, just tagging you so that I can get your help. Please help me with this Cordova to Capacitor storage migration.

3

Are you using cordova-plugin-nativestorage currently? If so, according to the Capacitor 3 Storage docs, you can set the group in ConfigureOptions to NativeStorage in order to be backward compatible.

If you are coming from Capacitor 2 Storage, then version 3 has a migrate method.

4

Hi @twestrick
I am using ‘@ionic/storage’ in ionic cordova application. When I upgraded my project to Capacitor 3(@ionic/storage-angular), I lost all user settings saved using @ionic/storage. I also used ‘@capacitor/storage’ but its not able to read those values.

I know there should be a way to read it, but don’t know the right way.

5

First, ionic/storage and capacitor/storage are two different things.

  • ionic/storage uses IndexDb, localstorage, or SQLite.
  • capacitor/storage uses native storage - UserDefaults (iOS) or SharedPreferences (Android)

As you are aware, Ionic Storage v3 is no longer Angular specific and Angular specific logic was moved to ionic/storage-angular. I am not familiar with the Angular package, but have you made sure your setup matches the Angular documentation here?

It looks like the driver order has also changed.

-v2: SQLite, IndexedDB, WebSQL, and LocalStorage
-v3: IndexedDB, LocalStorage

My guess is that your app was using SQLite and now it is looking in IndexedDB. You can change the driver order here. Just make note that the SQLite driver is no longer included by default. See the SQLite Installation here.

6

I tried that but no luck.
I had not defined any driver order in my ionic cordva app. As per the above documentation, I added driver order. But still its showing null values.

IonicStorageModule.forRoot({
  driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB]
}),
7

Are you also registering the driver?

import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver'

await this.storage.defineDriver(CordovaSQLiteDriver);

Reference

1 Like
8

Some things to keep in mind here…

The way iOS manages storage sandboxing is…odd.

If your app changes its package ID, it then creates a new sandbox for that app.
If your app changes from UIWebview to WKWebview, a new sandbox is created.
If your app has a different scheme/host (http://localhost, ionic://localhost), a new sandbox will be created.

So assuming your package id (com.app.id) is the same, you were already on WKWebview, and the scheme/host is the same, it should still work fine. But test out a few things with those settings to make sure.

1 Like
9

Thank you so much @twestrick. With your suggestion, I was able to fix the issue. These 2 lines of code were missing in my storageService. I dont know how I missed it, but after adding it, I started getting the values previously saved from the ionic cordova application. You are awesome. I really appreciate your help.

@mhartington - Thank you for pointing out above points. I will surely check them before my ionic-capacitor application goes live.

1 Like
10

Do we have any implementation for configure in capacitor for backward compatibility with native storage?, docs are not clear.

11

I’m using @ionic/storage-angular andI can’t migrate my data…
Registering the drivers and changing schemes didn’t work for me…
I don’t know what to do more, and I need t publish my app, but I can’t like this

12

maybe you can share some code of how to proceed, since you solve your issue?