Skip to main content

Secure Storage - Web Support

Ionic Secure Storage provides a powerful SQLite-backed data store, but SQLite is not available in a standard browser environment, so apps that must run on iOS, Android, and the web, have to take a slightly different approach to enable web support.

In this case, web support is provided by the companion @ionic/storage utility which provides a generic storage API that works across multiple platforms, abstracting away storage engine details and providing a simple API with low overhead.

One trade-off is this requires apps to use a key/value API instead of the SQL API for cross-platform support, which is an acceptable compromise for many apps. Optionally, apps may elect to use the SQL engine when running natively on iOS and Android, but fall back to using the key/value API provided in @ionic/storage when running on the web.

Installation​

View Ionic Storage installation instructions on the Key/Value page.

Usage​

For general web support usage, see the Ionic Storage docs.

It's recommended to create a Service that encapsulates all storage logic. Call an initialization function in the constructor. Within the function, define the Ionic Secure Storage driver, then set the encryption key before calling create().

Angular​

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage-angular';
import IonicSecureStorageDriver from '@ionic-enterprise/secure-storage/driver';
import { IdentityService } from './identity.service';

@Injectable({
  providedIn: 'root'
})
export class StorageService {
  private _storage: Storage | null = null;
  
  constructor(private storage: Storage, private identityService: IdentityService) {
    this.init();
  }

  async init() {
    // Obtain encryption key
    const encryptionKey = await this.identityService.getEncryptionKey();

    // Initialize Ionic Storage with encryption support
    await this.storage.defineDriver(IonicSecureStorageDriver);
    await this.storage.setEncryptionKey(encryptionKey);
    const storage = await this.storage.create();

    this._storage = storage;
  }
}

React, Vue, Vanilla JavaScript​

Coming soon!

Contents