Ionic 5|4 Storage Tutorial in Ionic using Native Storage Plugin

Storage of information on a user device is very important and required in almost every application. This information saved on a user device can be of any type including user sessions, profile details, user or application settings etc.

In Ionic application, we can store such information in WebView memory which remains even if the user closes application or clears app cache from the device. There are two easy ways for storage in the Ionic application:

1) Ionic’s @ionic/storage package with Cordova’s <strong>cordova-sqlite-storage</strong> plugin which is very easy to integrate and use. It can save key/value pairs and even JSON objects. Check Ionic’s storage package tutorial here.

2) Native Storage plugin with Cordova’s <strong>cordova-plugin-nativestorage</strong> plugin. This plugin uses Native storage of Android, iOS, and Windows which also makes it fast and can store more data.

In this article, we will focus on the tutorial for the second one.

Let’s start with a new Ionic application

Create a new Ionic app using CLI

Make sure you have the latest version on Ionic CLI installed. Create a new Ionic Application with a blank template.

# Install Latest Ionic CLI
$ npm install -g @ionic/cli

# Create new app
$ ionic start Ionic4NativeStorage blank --type=angular

# Enter App root`@`%`
$ cd Ionic4NativeStorage

Install Native Storage Plugin

Now to install Cordova and Ionic Native plugin for Storage run following npm  commands

$ ionic cordova plugin add cordova-plugin-nativestorage
$ npm install @ionic-native/native-storage

Add Storage in Module

Next, to use Storage Native plugin in the application, open app.module.ts file then import and add in providers array as shown below

//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

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

import { NativeStorage } from '@ionic-native/native-storage/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    NativeStorage,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use Storage in Application

In the home component, we will import the plugin then add in the class constructor, after that we can access storage methods to set, get, remove information.

//home.page.ts
import { Component } from '@angular/core';
import { NativeStorage } from '@ionic-native/native-storage/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private nativeStorage: NativeStorage
  ) {
  }

    ...
    ...

}

Methods in Native Storage

The Methods available in Native Storage service return promise. Following are the methods available in Native Storage to access data/information. Let's check them and usage.

setItem(reference: string, value: any): Stores a value

    this.nativeStorage.setItem('freakyItem1', { property: 'value', anotherProperty: 'anotherValue' })
      .then(
        (data) => console.log('Stored first item!',data),
        error => console.error('Error storing item', error)
      );

getItem(reference: string): Gets a stored item

    this.nativeStorage.getItem('freakyItem1')
      .then(
        data => console.log(data),
        error => console.error(error)
      );

keys(): Retrieving all keys

  keys() {
    this.nativeStorage.keys()
      .then(
        data => console.log(data),
        error => console.error(error)
      );
  }

 

remove(reference: string): Removes a single stored item

  remove() {
    this.nativeStorage.remove('freakyItem2')
      .then(
        data => console.log(data),
        error => console.error(error)
      );
  }

clear(): Removes all stored values.

  clear() {
    this.nativeStorage.clear()
      .then(
        data => console.log(data),
        error => console.error(error)
      );
  }

 

Conclusion: Storage in an ionic application using @ionic/storage provides internal intelligence by selecting storage engines. That's why we can also debug apps in the browser as well but in the case of Native Storage plugin as native storage is accessed app need Cordova so testing in a real dive can only be done.

Leave a Comment

Your email address will not be published. Required fields are marked *