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

สร้างโปรเจ็กส์ใหม่ชื่อ 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 {}

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 {

  name: string;
  age: string;

  constructor(public navCtrl: NavController, 
    private storage: Storage) {
 
     storage.set('name', 'Jack');
     storage.set('age', '38');

     this.getInfomation(); 
  }

  async  getInfomation() {
    try {
      this.name = await this.storage.get(`name`);
      this.age = await this.storage.get(`age`);
      
      console.log(this.name);
      console.log(this.age);
    } catch(error) {
      console.error(error.message)
    }
  }  
}

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 {

name: string;

age: string;

constructor(public navCtrl: NavController,

private storage: Storage) {

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

storage.set('age', '38');

this.getInfomation();

}

async getInfomation() {

try {

this.name = await this.storage.get(`name`);

this.age = await this.storage.get(`age`);

console.log(this.name);

console.log(this.age);

} catch(error) {

console.error(error.message)

}

การใช้งาน Storage ครั้งแรกจะมีปัญหา เราต้องแก้ไขดังตัวอย่างนี้

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

    //this.storage.clear().then(() => {
    //  console.log('all keys cleared');
    //});

    this.getSomething();
  }

  async getSomething() {
    try {
      this.server_ip = await this.storage.get(`server_ip`);
      this.server_port = await this.storage.get(`server_port`);
      
      if ((typeof this.server_ip === "undefined") || (this.server_ip === null)) {
        this.server_ip = "10.99.99.84"; // initial value
        this.storage.set('server_ip', this.server_ip);
      }
      if ((typeof this.server_port === "undefined") || (this.server_port === null)) {
        this.server_port = "80"; // initial value
        this.storage.set('server_port', this.server_port);
      }

      console.log(this.server_ip);
      console.log(this.server_port);
    } catch(error) {
      console.error(error.message)
    }
  }

constructor(public navCtrl: NavController,

private storage: Storage) {

//this.storage.clear().then(() => {

// console.log('all keys cleared');

//});

this.getSomething();

}

async getSomething() {

try {

this.server_ip = await this.storage.get(`server_ip`);

this.server_port = await this.storage.get(`server_port`);

if ((typeof this.server_ip === "undefined") || (this.server_ip === null)) {

this.server_ip = "10.99.99.84"; // initial value

this.storage.set('server_ip', this.server_ip);

}

if ((typeof this.server_port === "undefined") || (this.server_port === null)) {

this.server_port = "80"; // initial value

this.storage.set('server_port', this.server_port);

}

console.log(this.server_ip);

console.log(this.server_port);

} catch(error) {

console.error(error.message)

}

บรรทัดที่ 4-6: เป็นการลบข้อมูลทั้งหมดที่มีใน Storage (ฐานข้อมูล)
บรรทัดที่ 8: เรียกใช้เมธอด getSomething()
บรรทัดที่ 11: (ต้อง)ประกาศเมธอด getSomething() เป็นแบบ async
บรรทัดที่ 13-26: ทำงานเรียงลำดับจากบรรทัดที่ 13 ถึงบรรทัดที่ 26 โดยที่คำสั่งในบรรทัดที่ 13 และ 14 เป็นแบบ async ก็จริง แต่บรรทัดที่ 13 จะต้องทำงานเสร็จก่อน ถึงจะทำงานบรรทัด่ที่ 14
บรรทัดที่ 13-14: อ่านข้อมูลจาก Storage
บรรทัดที่ 16,20: ตรวจสอบว่าเป็นการอ่านข้อมูลจาก Storage เป็นครั้งแรกมั๊ย ถ้าใช่จะได้ค่า "undefined" ถ้าใช้ก็กำหนดค่าเริ่มต้น (init) แต่ถ้าไม่ใช่ โค๊ดส่วนนี้เอาไว้ป้องกัน Error จากการเรียกใช้ Storage ครั้งแรก

Link

Phaisarn Sutheebanjard

blog.phaisarn.com

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

src/app/app.module.ts

src/pages/home/home.ts