Saving Application Data

Saving Application Data

We’ve dealt with saving the photo files using native storage, but we also need to store data in our application as well - just like we did for our Quicklists application. We might have a photo saved on the users device, but we still need our application to remember the path to that photo, and that is what we will be storing using Ionic’s Storage API.

There isn’t going to be anything new here - we will be doing just what we did with the Quicklists application, but this will actually be a little easier since we only need to store one type of data.

Adding Ionic Storage

Action

Install the following packages:

npm install @ionic/storage-angular

npm install localforage-cordovasqlitedriver

Action

Set up storage in your main.ts file:

import CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
import { Drivers } from '@ionic/storage';
import { IonicStorageModule } from '@ionic/storage-angular';

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

Creating the Storage Service

First, we will set up the same storage utilities we used in the Quicklists application.

Action

Create a file at src/app/shared/utils/storage.ts and add the following:

import { resource, ResourceRef } from '@angular/core';
import { Storage } from '@ionic/storage-angular';

export function createStorage(ionicStorage: Storage, driver: any) {
  return resource({
    loader: async () => {
      const storage = await ionicStorage.create();
      storage.defineDriver(driver);
      return storage;
    },
  });
}

export function getFromStorage(
  storage: ResourceRef<Storage | undefined>,
  key: string,
  defaultValue?: any,
) {
  return resource({
    params: () => storage.value(),
    loader: async ({ params }) => {
      const value = await params.get(key);
      return value ?? defaultValue;
    },
    defaultValue,
  });
}