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

## 前回まで
[導入編](https://qiita.com/ryosomiya/items/277826a7418aeef06976)
[遷移編](https://qiita.com/ryosomiya/items/2aa4db6bb94ec38f99dc)

## 概要
アプリ内でデータを保持しときたいときとかあります。多分。きっと。
アプリでの設定とかするときとか。
そんなとき`cordova-sqlite-storage`を使っていきます。
[公式ドキュメント](https://ionicframework.com/docs/native/sqlite/)

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

## プラグインの追加
### コマンドでプラグインをインストール

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

### ルートモジュール追加設定
[前回](https://qiita.com/ryosomiya/items/2aa4db6bb94ec38f99dc)でもやりましたが、モジュールを追加したらルートモジュールに設定が必要でしたね。

```ts: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`にボタンを追加して現在時刻を保存します。

```html: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()`の中身を書きます。

```ts: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にしましょう。

### データを取得する処理

```ts: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で取得したデータを表示します。

```html: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
```
![strageLoop.gif](https://qiita-image-store.s3.amazonaws.com/0/53709/d90e1823-a1f7-3d30-fb6b-8cb7ef88dcb2.gif)
一応ボタンをおしてページ遷移したときだけ、nextPageで時間が更新されています。

　　.

　　.

　　.

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

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

以上

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