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 Ionic4NativeStorageInstall 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-storageAdd 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 Reply