การใช้งาน Storage | Phaisarn Sutheebanjard

สร้างโปรเจ็กส์ใหม่ชื่อ localStorage

[code]
> ionic start storage blank
> cd storage
> ionic serve
[/code]

ติดตั้ง plugin

[code]
> ionic cordova plugin add cordova-sqlite-storage

> npm install –save @ionic/storage
[/code]

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { IonicStorageModule } from '@ionic/storage';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot({
      name: '__mydb',
         driverOrder: ['indexeddb', 'sqlite', 'websql']
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    IonicStorageModule
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { IonicStorageModule } from '@ionic/storage';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp),

IonicStorageModule.forRoot({

name: '__mydb',

driverOrder: ['indexeddb', 'sqlite', 'websql']

})

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler},

IonicStorageModule

]

})

export class AppModule {}

ถ้าไม่ใส่ IonicStorageModule ในบรรทัดที่ 34 บางทีจะเกิดปัญหา Runtime Error Uncaught (in promise): Error: StaticInjectorError[Storage]: NullInjectorError: No provider for Storage!
ทางแก้ก็คือใส่ไว้ตลอดละกัน ง่ายดี

src/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, 
    private storage: Storage) {

    // set a key/value
    storage.set('name', 'Jack');

    // Or to get a key/value pair
    storage.get('name').then((val) => {
      console.log('Your name is', val);
    });        
  }
}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { Storage } from '@ionic/storage';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController,

private storage: Storage) {

// set a key/value

storage.set('name', 'Jack');

// Or to get a key/value pair

storage.get('name').then((val) => {

console.log('Your name is', val);

});

}

กด F12 ดูที่ console จะเห็น Your name is Jack
ลองปิดบรรทั่ดที่ 15 แล้วรันอีกรอบจะต้องเห็นข้อความเดิม เพราะข้อมูลถูกเก็บใน storage แล้ว

แต่ปัญหาคือการทำงานกับ storage ซึ่งมีเมธอด set, get, remove และ clear นั้น
มีเมธอด get และ remove ทำงานแบบ async ดังนั้นการทำงานจะไม่เป็นไปตามลำดับ

ทางแก้ใช้ Promise การใช้งาน Storage แบบ Promise

Link