Migrating from Ionic 3 app to Ionic 5 Storage problem

Ionic Framework
1

Hello everyone,
I had developed and released an app with ionic 3. Now I’m about to release a new version of the app developed with ionic 5. The problem is that after updating the app the users cannot find the data saved in the Storage.
in both versions I used:

@ ionic / storage

and in app.module:
IonicStorageModule.forRoot ({
name: ‘k__mydb’,
driverOrder: [‘indexeddb’, ‘sqlite’, ‘websql’]
})

can you help me please?

2

Please see this discussion - Migration from IonicStorage in Cordova app to Capacitor Storage in Capacitor 3.

3

Or consider downgrading to v2 of storage

4

how do i downgrade to v2 of storage?

5

Remove the package using npm remove

Then add the lower version using npm install @ionic/storage@2…. etc…

6

I tried two solutions without success:

  1. ionic storage v3
    in app.module.ts

    import { IonicStorageModule } from ‘@ionic/storage-angular’;
    import * as CordovaSQLiteDriver from ‘localforage-cordovasqlitedriver’;
    import { Drivers } from ‘@ionic/storage’;

    imports: [
    .
    .
    .
    IonicStorageModule.forRoot({
    name: ‘cc__db’,
    driverOrder: [CordovaSQLiteDriver._driver,Drivers.IndexedDB, Drivers.LocalStorage]
    }),
    ]

    in app.components.ts

    import { Storage } from ‘@ionic/storage-angular’;
    import * as CordovaSQLiteDriver from ‘localforage-cordovasqlitedriver’
    import { Drivers } from ‘@ionic/storage’;

    constructor(
    private storage: Storage
    )

    await this.storage.defineDriver(CordovaSQLiteDriver);
    await this.storage.create();

    (for testing I added this too)
    const store = new Storage({
    name: ‘cc__db’,
    driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB, Drivers.LocalStorage]
    });
    await store.create();

  2. ionic storage v2

    in app.module.ts

    import { IonicStorageModule } from ‘@ionic/storage’;

    imports: [
    .
    .
    .
    IonicStorageModule.forRoot({
    name: ‘cc__db’,
    driverOrder: [‘indexeddb’, ‘sqlite’, ‘websql’]
    }),
    ]

    in app.components.ts

    import { Storage } from ‘@ionic/storage’;

    constructor(private storage: Storage)

    this.storage.ready().then(() => {
    .
    .
    .
    });

    what am I doing wrong?

7

@twestrick @Tommertom can you help me please?

8

Are both solutions you tried running (meaning no errors) but just not returning your user’s data that was previously stored?

For v3, if you were using IndexedDB previously, then you don’t need to import CordovaSQLiteDriver or override the driverOrder as IndexedDB is default in v3.

9

yes, both solutions do not return user data.

in the old app, made with ionic 3, I had this configuration:
IonicStorageModule.forRoot ({
name: ‘cc__db’,
driverOrder: [‘indexeddb’, ‘sqlite’, ‘websql’]
})

10

So in v3, you definitely need to get rid of CordovaSQLiteDriver as you want to be using IndexedDB. Otherwise I am not sure as I am not familiar with Angular. All I can go own is comparing your code to the documentation in the ionic-storage readme :slight_smile:

11

using the same v2 version of ionic storage, via chrome://inspect/#devices I debugged and inspected the app storage configuration with ionic 3 and app with ionic 5.
The result is that the configurations are the same

13

The application I work on had a lot of trouble upgrading from Ionic 3 to Ionic 4 at least partly from persistent storage being in indexeddb by default. Ionic 4 changes the URL the application is served from, so the WebView sandboxing blocks you from accessing the Ionic 3 persistent storage. It was not easy to address this. The solution we went with involved moving to Cordova native storage driver, adding native code to an existing plugin on iOS to look for the indexeddb files in the old location and move them to the new location, and on Android, loading up a small JS page in InAppBrowser to exfiltrate the indexeddb data so we could re-store it into the Cordova native storage.

14

Read the docs

15

@chrisjdev can you please share the code used for ios and android?

16

The android code was based on this: Migrate Android IndexedDB from Ionic 3 to Ionic 4 · GitHub
The iOS code was based on:
cordova-plugin-migrate-localstorage/MigrateLocalStorage.m at master · jairemix/cordova-plugin-migrate-localstorage · GitHub
I also reread the docs @mani0011. I didn’t see anything in there about migrating Ionic Storage when upgrading Ionic 3 to Ionic 4+

Edit: Added link to iOS code.

3 Likes