Table of Contents
Storage In Ionic 3 & Angular 5
Hello All, Today we will see storage in ionic 3. Ionic storage is store key, value pair & JSON objects. It’s the easiest way in ionic to store & get the data using key. We will see the usage of this module. Just follow 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 following command :
ionic g page storage-example
you can see here what are the different types of command use to Generate ionic pages, component & pipes
2. Install the plugin & it’s 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 :
1 thought on “IONIC V3 | STORAGE IN IONIC 3 | BASICS”