3d cartoon hands holding a phone

Unlock full course by purchasing a membership

Lesson 6

Saving Application Data

Saving state in local storage


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

Install the following packages:

npm install @ionic/storage-angular
npm install localforage-cordovasqlitedriver

Add the following import to your root NgModule:

      driverOrder: [
        // eslint-disable-next-line no-underscore-dangle

NOTE: You will also need the following imports at the top of the file containing your root module:

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

Creating the Storage Service

Create a file at src/app/shared/data-access/storage.service.ts and add the following:

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage-angular';
import { from, Observable } from 'rxjs';
import { map, shareReplay, switchMap, take, tap } from 'rxjs/operators';
import { Photo } from '../interfaces/photo';

  providedIn: 'root',
export class StorageService {
  #hasLoaded = false;

  storage$ = from(this.ionicStorage.create()).pipe(shareReplay(1));
  load$: Observable<Photo[]> = this.storage$.pipe(
    switchMap((storage) => from(storage.get('photos'))),
    map((photos) => photos ?? []),
    tap(() => (this.#hasLoaded = true)),

  constructor(private ionicStorage: Storage) {}

  save(photos: Photo[]) {
    if (this.#hasLoaded) {
      this.storage$.pipe(take(1)).subscribe((storage) => {
        storage.set('photos', photos);

Thanks for checking out the preview of this lesson!

You do not have the appropriate membership to view the full lesson. If you would like full access to this module you can view membership options (or log in if you are already have an appropriate membership).