Ionicでモバイルアプリを作ろう！(7)データの永続化/Storageを使う

クロスプラットフォーム対応のモバイルアプリ開発フレームワークであるIonic2の使い方を紹介していきます。

Ionicでモバイルアプリを作ろう！(1)概要・環境構築
 Ionicでモバイルアプリを作ろう！(2)ツールの基本的な使い方を覚える
 Ionicでモバイルアプリを作ろう！(3)ページの作成/ページ遷移
 Ionicでモバイルアプリを作ろう！(4)HTTP通信(REST API)
Ionicでモバイルアプリを作ろう！(5)スタイル定義
 Ionicでモバイルアプリを作ろう！(6)プロキシを使う
 Ionicでモバイルアプリを作ろう！(6)プロキシを使う

今回はIonicアプリで端末上にデータを保存する方法について解説したいと思います。

Storage

Ionicにはデータをキー・バリューまたはJSONを保存できるStorageというインターフェースが含まれています。
Storageは内部的にプラットフォームごとに最適なものを選択してくれるので
プラットフォーム差異を気にすることなく実装が可能です。

モバイル端末上で動かす際にはSQLiteを内部的に用いるため、
CordovaのSQLiteプラグインをインストールしておく必要があります。

補足***************************************************************************
CordovaはIonicが基にしているフレームワークで、カメラやストレージ等デバイスの機能にアクセス
するためのJavaScriptインターフェースをプラグインという形で提供しています。
*******************************************************************************

プロジェクトのディレクトリで下記コマンドを実行します。

$ ionic plugin add cordova-sqlite-storage --save

次にIonicのStorageモジュールをインストールしておきます。

$ npm install @ionic/storage --save

次にStorageモジュールをアプリ全体でSeviceとして用いたいのでNgModuleで宣言をしておきます。
/src/app/app.module.tsに以下のように追記します。

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

@NgModule({
  declarations: [
    //...
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    //...
  ],
  providers: [
    Storage
  ]
})
export class AppModule {}

ここまで出来たらあとはStorageを使いたい場所でInjectすることで使えます。
ごく簡単な実装例を載せておきます。

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

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

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

  setId () {
    this.storage.set("id", "012345678");
  }

  getId(){
    this.storage.get("id").then(id => {
      console.log(id);
    });
  }

}