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インターフェースをプラグインという形で提供しています。
*******************************************************************************

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

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

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

1	`$ npm install @ionic/storage --save`

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

app.module.ts//...
import { Storage } from '@ionic/storage';
 
@NgModule({
  declarations: [
    //...
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    //...
  ],
  providers: [
    Storage
  ]
})
export class AppModule {}

app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19	`//...` `import` `{ Storage } from` `'@ionic/storage';` `@NgModule({` `declarations: [` `//...` `],` `imports: [` `IonicModule.forRoot(MyApp)` `],` `bootstrap: [IonicApp],` `entryComponents: [` `//...` `],` `providers: [` `Storage` `]` `})` `export` `class` `AppModule {}`

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

home.ts//...
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);
    });
  }
 
}

home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23	`//...` `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);` `});` `}` `}`