IONIC V3 | STORAGE IN IONIC 3 | BASICS

Share the post

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 :

  1. 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 :

Storage_Ionic3_Angular5
Output

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 :

Storage_Using_Ionic3_Angular5

Leave a Comment