Table of Contents
Storage In Ionic 3 & Angular 5
Hello All, Today we will see storage in ionic 3. Ionic storage is stores key, value pair & JSON objects. It’s the easiest way in ionic to store & get the data using a key. We will see the usage of this module. Just follow the below few steps to implement the storage functionality in ionic 3.
Steps to Implement Storage Module :
- Generate a new page by using command :
To demonstrate the same we will create a new page by adding the following command :
ionic g page storage-example
you can see here what are the different types of commands use to Generate ionic pages, components & pipes
2. Install the plugin & its dependency as follows :
ionic cordova plugin add cordova-sqlite-storage
npm install --save @ionic/storage
3. Add dependency of storage module & import the page we have just created in step 1.
app.module.ts file is as follows :
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { QrscannerPage } from '../pages/qrscanner/qrscanner';
import { LocalNotificationPage } from '../pages/local-notification/local-notification';
import { GeolocationPage } from '../pages/geolocation/geolocation';
import { InappbrowserPage } from '../pages/inappbrowser/inappbrowser';
import { SocialSharingPage } from '../pages/social-sharing/social-sharing';
import { FormExamplePage } from '../pages/form-example/form-example';
import { StorageExamplePage } from '../pages/storage-example/storage-example';
import { ModalPage } from '../pages/modal/modal';
import { LoginPage } from '../pages/login/login';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LocalNotifications } from '@ionic-native/local-notifications';
import { Geolocation } from '@ionic-native/geolocation';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { SocialSharing } from '@ionic-native/social-sharing';
import { RestProvider } from '../providers/rest/rest';
import { HttpClientModule } from "@angular/common/http";
import { CommonProvider } from '../providers/common/common';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';
import { IonicStorageModule } from '@ionic/storage';
@NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
TabsPage,
ModalPage,
QrscannerPage,
LocalNotificationPage,
GeolocationPage,
InappbrowserPage,
SocialSharingPage,
FormExamplePage,
StorageExamplePage
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage,
TabsPage,
ModalPage,
QrscannerPage,
LocalNotificationPage,
GeolocationPage,
InappbrowserPage,
SocialSharingPage,
FormExamplePage,
StorageExamplePage
],
providers: [
StatusBar,
SplashScreen,
LocalNotifications,
Geolocation,
InAppBrowser,
SocialSharing,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
RestProvider,
CommonProvider,
QRScanner
]
})
export class AppModule { }
4. Write Menu to display our example page (Optional step) in app.component.ts :
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { LoginPage } from "../pages/login/login";
import { TabsPage } from "../pages/tabs/tabs";
import { QrscannerPage } from '../pages/qrscanner/qrscanner';
import { LocalNotificationPage } from '../pages/local-notification/local-notification';
import { GeolocationPage } from '../pages/geolocation/geolocation';
import { InappbrowserPage } from '../pages/inappbrowser/inappbrowser';
import { SocialSharingPage } from '../pages/social-sharing/social-sharing';
import { FormExamplePage } from '../pages/form-example/form-example';
import { StorageExamplePage } from '../pages/storage-example/storage-example';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = LoginPage;
pages: Array<{ title: string, component: any }>;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Home', component: HomePage },
{ title: 'Tabs', component: TabsPage },
{
title: 'QR Scanner', component: QrscannerPage
},
{ title: 'Local Notification', component: LocalNotificationPage },
{ title: 'Geolocation', component: GeolocationPage },
{ title: 'In App Browser', component: InappbrowserPage },
{ title: 'Social Share', component: SocialSharingPage },
{ title: 'Form Validation', component: FormExamplePage },
{ title: 'Storage Example', component: StorageExamplePage },
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
5. Write an HTML:
to save input box value & get the same value using key to display it.
<!--
Generated template for the StorageExamplePage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Storage Example</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div>
<p>TO STORE VALUE</p>
<ion-item>
<ion-label>Please write value in below textbox which you want to save</ion-label>
<ion-input type="text" [(ngModel)]="STORAGE_VALUE"></ion-input>
</ion-item>
<ion-item>
<button ion-button full (click)="saveValue(STORAGE_VALUE);">SAVE</button>
</ion-item>
</div>
<div>
<p>TO GET STORED VALUE</p>
<ion-item>
<button ion-button full (click)="getValue();">GET VALUE</button>
</ion-item>
<ion-item>
<ion-label>{{RETRIEVED_VALUE}}</ion-label>
</ion-item>
</div>
</ion-content>
6. Write storage-example.ts file to get stored value :
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';
/**
* Generated class for the StorageExamplePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-storage-example',
templateUrl: 'storage-example.html',
})
export class StorageExamplePage {
STORAGE_VALUE: string = '';
RETRIEVED_VALUE: string = '';
constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad StorageExamplePage');
}
saveValue(val) {
console.log(val);
if (val) {
this.storage.set('USERDATA', val).then((val) => {
this.STORAGE_VALUE = '';
});
} else {
alert("Please fill input value");
}
}
getValue() {
this.storage.get('USERDATA').then((val) => {
if (val) {
console.log(val);
this.RETRIEVED_VALUE = val;
}
});
}
}
In above example we have the function called saveValue() to save the value using storage module. Here we have used the KEY = ‘USERDATA’ to store input value. To retrieve the value stored in KEY=’USERDATA’ we have used getValue() function.
Please find below output after click on GET VALUE button :
If you want to see the saved data into the chrome browser, then follow steps below:
- ==>Run the application => ionic serve
- ==>Right click anywhere on the page => Click on inspect
- ==>Go to Application Tab => On left side menu click on IndexedDB (Under Storage)
- ==>Click on _ionickv
Please see below image for more details :
