ionic3でハイブリッドアプリを作ってみよう。 - データの永続化編

前回まで

導入編
遷移編

概要

アプリ内でデータを保持しときたいときとかあります。多分。きっと。
アプリでの設定とかするときとか。
そんなときcordova-sqlite-storageを使っていきます。
公式ドキュメント

今回は簡単にボタンを押したら現在時刻を保存して、他のページで表示してみましょう。

プラグインの追加

コマンドでプラグインをインストール

$ ionic cordova plugin add cordova-sqlite-storage
$ npm install --save @ionic-native/sqlite

ルートモジュール追加設定

前回でもやりましたが、モジュールを追加したらルートモジュールに設定が必要でしたね。

src/app/app.module.ts

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';
import { NextPageModule } from '../pages/next/next.module';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    NextPageModule,
    IonicStorageModule.forRoot()  // ←追加
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

以上追加の二行を追加します。
これで準備ができました。

データを保存する

ボタンを設置

データを保存するトリガーを設定しましょう。
HomePageにボタンを追加して現在時刻を保存します。

src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="saveTime()">現在時刻を保存</button>
  <button ion-button (click)="toNextPage()">next</button>
</ion-content>

ページ遷移のボタンの前に「現在時刻を保存」するボタンを設置しました。
クリックされたらsaveTime()という処理をしましょう。

現在時刻を保存する

saveTime()の中身を書きます。

src/pages/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NextPage } from '../next/next';
import { Storage } from '@ionic/storage';

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

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

  // NextPageへ遷移
  toNextPage(){
    this.navCtrl.push(NextPage);
  }

  // 現在時刻を保存
  saveTime(){
    let now = new Date();
    this.storage.set('time', now.getHours()+'-'+now.getMinutes()+'-'+now.getSeconds());
   }
}

変更点は

1. importでモジュールを読み込む
2. constructorの引数を追加
3. saveTime()という現在時刻を保存する処理を追加

3ではtimeというキーで現在時刻をアプリケーション内部に保存しています。

保存したデータを取得する

データの保存はできたはずなので、今度は保存したデータの取得をします。
表示するのはNextPageにしましょう。

データを取得する処理

src/pages/next/next.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';

/**
 * Generated class for the NextPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-next',
  templateUrl: 'next.html',
})
export class NextPage {
  outputTime:string;

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

    // timeというキーで保存してあるデータを取り出します。
    this.storage.get("time").then(savedTime => {
      this.outputTime = savedTime;
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad NextPage');
  }
}

1. importでStorageモジュールの読み込み
2. constructorに引数を追加
3. 保存してあったtimeというキーのデータを取り出して、outputTimeという変数をhtmlで使えるようする

以上三点が変更ですね。

取得したデータを表示

NextPageで取得したデータを表示します。

src/pages/next/next.ts

<!--
  Generated template for the NextPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>nextPage</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <p>{{ outputTime }}</p>
</ion-content>

追加してるのは<p>{{ outputTime }}</p>の一行だけです。

動かしてみる

$ ionic cordova run ios

一応ボタンをおしてページ遷移したときだけ、nextPageで時間が更新されています。

　　.

　　.

　　.

わかりにくいよ！！！！！！
同じページでやれよ！！！！

そうだよね。もう書いちゃったし、いいかな。
といあえずデータの永続化です。
もちろんアプリをアンインストールするまではデータを持ち続けます。

以上

おまけ

データを取得するときにstrage.get(...)とかやったけど、登録されてないキーを取得しようとしたときはnullになりエラーになりませんでした。