IonicのStorageプラグインの使い方

はじめに

公式ページ
参考ページ

Ionicでデータを保存できる[* Storage]インターフェース。

保存方法はキー・バリューの形式であり、バリューにはJSONをそのまま格納できる。

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

なので、公式のやり方にしたがって使用準備をします。

また、

ストレージのエンジン (ドライバー) としては、スマートフォン上で実行する場合は SQLite を優先的に利用し、 Web のコンテキストでは IndexedDB、WebSQL、localstorage の順で利用します。

なので、今回は特別にStorageを指定せず導入してみます。
Storageの指定方法はページの一番下に記述します。

準備

$ ionic cordova plugin add cordova-sqlite-storage

$ npm install --save @ionic/storage

app.module.ts

 import { IonicStorageModule } from '@ionic/storage';

 @NgModule({
   declarations: [
     // ...
   ],
   imports: [      
     // ...
     IonicStorageModule.forRoot()
   ],
   // ...
 })
 export class AppModule {}

使用方法

Storageを使いたい場所でInjectすれば使えます。
ここではoverwatch-jsというAPIを使用して取得したデータをストレージに格納、使用しております。

search.ts

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

 @Component({
   ...
 })
 export class SearchPage {
   constructor(... private storage: Storage) {
     ...
   }

   // 検索を行う
   getPlayerInfo(playerIdFirstPart, playerIdSecondPart) {
    ...
     let instance: SearchPage = this;
     // overwatch-jsの詳細情報取得メソッド
     overwatchJs.getAll(this.platform, this.region, playerId).then(
       (data) => {         
         // storage.set()でストレージにkey, value(JSON)の形式で格納する
         instance.storage.set(data.profile.nick, data);
         console.log(data.profile.nick); 
         ...
       }, (reason) => {
         ...
       }
     );
   }
   ...
 }

home.ts

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

 @Component({
   ...
 })
 export class HomePage {

   items;

   constructor(public navCtrl: NavController, private storage: Storage) {
     this.initializeItems();
   }

   initializeItems() {
     this.items = new Array();
     // storage.forEach()でstorageに格納されているvalueとkeyの組み合わせをまわす
     this.storage.forEach((value, key) => {
       let userIdIndex = value.profile.url.lastIndexOf('/');
       let regionIndex = value.profile.url.lastIndexOf('/', userIdIndex - 1);
       let platformIndex = value.profile.url.lastIndexOf('/', regionIndex - 1);
       this.items.push({
         'userInfo': value,
         'userId': value.profile.url.slice(userIdIndex + 1),
         'region': value.profile.url.slice(regionIndex + 1, userIdIndex),
         'platform': value.profile.url.slice(platformIndex + 1, regionIndex)
       })
     });
     console.log(this.items);
   }
 }

※Storageの指定 公式引用

app.module.ts

 import { IonicStorageModule } from '@ionic/storage';

 @NgModule({
   declarations: [...],
   imports: [
     IonicStorageModule.forRoot({
       name: '__mydb',
          driverOrder: ['indexeddb', 'sqlite', 'websql']
     })
   ],
   bootstrap: [...],
   entryComponents: [...],
    providers: [...]
 })
 export class AppModule { }