How to use @ionic/storage - 10 common examples

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { Effect } from '@ngrx/effects';
import { ActionReducer } from '@ngrx/store';
import { defer, from, Observable, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

const STORAGE_KEY = 'NSIS_APP_STATE';

const storage = new Storage({});

// get/setNested inspired by
// https://github.com/mickhansen/dottie.js
function getNested(obj: any, path: string): any {
  if (obj !== null && path) {
    // Recurse into the object.
    const parts = path.split('.').reverse();
    while (obj != null && parts.length) {
      obj = obj[parts.pop()];
    }
  }
  return obj;
}

function setNested(obj: any, path: string, value: any): any {
  if (obj != null && path) {

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    Items,
    Camera,
    SplashScreen,
    StatusBar,
    MessageMocks,
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    HttpProvider,
    Util,
    UserProvider

// required for ng translate, tells it to look in assets folder for trans files
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, "assets/i18n/", ".json");
}

export class MyMissingTranslationHandler implements MissingTranslationHandler {
  handle(params: MissingTranslationHandlerParams) {
    return params.key;
  }
}

@NgModule({
  declarations: [MyApp, Iframe],
  imports: [
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    BrowserModule,
    HttpModule,
    HttpClientModule,
    AudioPlayerComponentModule,
    Angulartics2RouterlessModule.forRoot([Angulartics2GoogleAnalytics]),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, Iframe],
  providers: [

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { HttpClientModule } from '@angular/common/http';
import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    IonicStorageModule.forRoot(
      {
        name: '__mydb',
        driverOrder: ['indexeddb', 'sqlite', 'websql']
      }
    )
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

DonatePage,
    PaperPage,
    TutorialPage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp, {
      tabbarPlacement: "bottom",
      backButtonText: "后退",
      tabsHideOnSubPages: true,
      tabsHighlight: true
    }),
    MomentModule,
    IonicStorageModule.forRoot(),
    Ionic2RatingModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    DiscoverPage,
    HomePage,
    Section,
    BookListModal,
    HtmlModal,
    TodoModal,
    SkillModal,
    ArticleDetailPage,
    ArticleListPage,
    ChapterListPage,
    ChapterDetailPage,

PrayerTimesApp,
    MonthPage,
    MonthSelector,
    SettingsPage,
    MinuteSelectorModal,
    TodayPage,
    TabsPage,
    PrayerItemComponent,
    PrayerGridComponent,
    TitleCasePipe
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(PrayerTimesApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    PrayerTimesApp,
    MonthPage,
    SettingsPage,
    TodayPage,
    TabsPage,
    MonthSelector,
    MinuteSelectorModal
  ],
  providers: [
    { provide: Settings, useFactory: provideSettings, deps: [ Storage ] },
    PrayerTimes,
    LocalNotifications,
    Device,

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production
    })
  ],
  declarations: [AppComponent],
  providers: [InAppBrowser, SplashScreen, StatusBar],
  bootstrap: [AppComponent]
})
export class AppModule {}

@NgModule (
{
    declarations    :
    [
        AppComponent
    ,   LoginComponent
    ,   DashboardComponent
    ,   DesignerComponent
    ,   MailComponent
    ,   SettingsComponent
    ],
    imports         :
    [
        IonicModule.forRoot(AppComponent)
    ,   IonicStorageModule.forRoot()
    ,   BrowserModule
    ,   HttpModule
    ],
    providers       :
    [
        StatusBar
    ,   SocketService
    ,   SplashScreen
    ,   DataframeBase
    ,   DataframeAccount
    ,   DatastoreService
    ,   NotifyService
    ],
    entryComponents :
    [
        AppComponent

import { IdlePreloadModule } from './core/idle-preload.module';
import { SharedModule } from './shared';
import { RequestCacheService, RequestCacheWithMap } from './core/request-cache.service';
import { CacheInterceptor } from './core/cache.interceptor';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    IdlePreloadModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    AppRoutingModule,
    HttpClientModule,
    SharedModule.forRoot()
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },