Storage wipes on page reload?

Ionic Native
1

In my current application I am using @ionic/storage to persist key user data on the device. My specific problem is that during initialisation, Storage appears to wipe the Web SQL database.

I’ve verified myself that Storage

  1. Writes data.
  2. Reads data.

Everything in this regard is correct. However, it wipes the store during init. This is what I see after teardown and reload:

12
Screenshot 2019-01-24 at 16.21.12.png1402×590 42.3 KB

The ID key increments on each reload.

Software Versions:

  1. @ionic/storage v2.2.0
  2. @ionic/native v5.0.0
  3. @ionic/angular v4.0.0

Putting aside code to call get/set, our configuration and initialization code is minimal. After we load the storage module we instantiate the service in a wrapper to return observables for ease of use with NGRX.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppErrorsModule,
    AppRoutingModule,
    AppStoreModule,
    BrowserAnimationsModule,
    BrowserModule,
    HttpClientModule,
    InterceptorsModule,
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    MenuModule
  ],
  bootstrap: [
    AppComponent
  ],
  providers: [
    SplashScreen,
    StatusBar
  ]
})
export class AppModule {}

import { Inject, Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { Observable, from } from 'rxjs';
import { Platform } from '@ionic/angular';

@Injectable({ providedIn: 'root' })
export class StorageService {
  constructor(private storage: Storage) {}

  get(key: string): Observable<any> {
    return from(this.storage.get(key));
  }

  set(key: string, value: any): Observable<any> {
    return from(this.storage.set(key, value));
  }

  remove(key: string): Observable<any> {
    return from(this.storage.remove(key));
  }

  clear(): Observable<any>  {
    return from(this.storage.clear());
  }

  keys(): Observable<Array<string>> {
    return from(this.storage.keys());
  }
}
2

I solved this myself. The problem was caused by race conditions during app initialization. Effects elsewhere overwrote the state. While I feel a bit dumb, I’m leaving this up in case anyone else has the problem.

3

According to Ionic Storage Doc:

  • When running in a native app context, Storage will prioritize using SQLite, as it’s one of the most stable and widely used file-based databases, and avoids some of the pitfalls of things like localstorage and IndexedDB, such as the OS deciding to clear out such data in low disk-space situations.
  • When running in the web or as a Progressive Web App, Storage will attempt to use IndexedDB, WebSQL, and localstorage, in that order.

To Solve this Issue: Make sure you have change Storage Driver from WebSQL to SQLit or IndexedDB

In your app.module.ts

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [...],
  imports: [
    IonicStorageModule.forRoot({
      name: '__mydb',
      driverOrder: ['sqlite', 'indexeddb', 'websql', 'localstorage']
    })
  ],
  bootstrap: [...],
  entryComponents: [...],
   providers: [...]
})
export class AppModule { }
4

You’re ten months late.

6

Hello. I am having the same issue … I know it’s too late but do you still remember how did you solve it? The above mentioned solution from Cambodia does not work.

Thanks