Create & Use a Local StorageProvider in Ionic Apps

June 22, 2018 · One min read

Add a provider to the Ionic3 app refer and follow the below steps
How to Add Providers in Ionic3+

Steps

Inject the Storage to the StorageProvider and that was created in the How to Add Providers in Ionic3+
Add IonicStorageModule to the imports list in your NgModule declaration in src/app/app.module.ts

import { IonicStorageModule } from '@ionic/storage';
import { StorageProvider } from '../providers';
@NgModule({
 declarations: [
 // ...
 ],
 imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
 ],
 bootstrap: [IonicApp],
 entryComponents: [
 // ...
 ],
 providers: [
    // ...
    StorageProvider,
 ]
})

To use StorageProvider in your Page/Component inject it and use it

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { StorageProvider } from '../../providers';

 \*\*
 \*  Class representing a StorageProvider Demo
 \*  Author - Nag
 \*
@IonicPage()
@Component({
 selector: 'page-storage',
 templateUrl: 'storage.html',
})
export class StoragePage {
 private editValue;
 constructor(public storageProvider: StorageProvider) {
 }
 set() {
 this.storageProvider.setValue('EDIT\_KEY', this.editValue);
 }
 get() {
 this.storageProvider.getValue('EDIT\_KEY').then((value) => {
 alert('StorageTest \\nSaved value: ' + value);
 });
 }
}

FILES
Refer the code files in Github

Steps​

Steps