Ionic2+でのストレージの使用
IonicのLocalStorageは、Ionic 2+では単にStorageと呼ばれるようになり、舞台裏でStorageがデータを保存するための最良の方法を決定します。 たとえば携帯電話では、SQLiteが推奨されるストレージ方法です。 IndexedDB、WebSQL、またはlocalstorageは、プログレッシブWebアプリのブラウザーで使用されます。
ストレージは、データまたはJsonオブジェクトのキーと値のペアを保存する最も簡単な方法です。 Ionic2+アプリで使用する方法は次のとおりです。
インストール
まず、次のコマンドを使用してSQLiteCordovaプラグインをインストールします。
$ cordova plugin add cordova-sqlite-storage --save
次に、ストレージをインストールします。 ストレージが自動的に含まれるようになったため、RC0より大きいバージョンまたはIonic 2を使用している場合は、この手順をスキップできます。
$ npm install --save @ionic/storage
インポート+注入
適切なモジュール、たとえばアプリルートモジュールにインポートします。
モジュール:app.module.ts
...
import { IonicStorageModule } from '@ionic/storage';
次に、それを必要とするコンポーネントに注入します。
コンポーネント:team.ts
...
import { Storage } from '@ionic/storage';
export class TeamPage {
constructor(public navCtrl: NavController, public storage: Storage) { }
使用法
これで、Storageの set 、 get 、およびremoveメソッドの使用を開始する準備が整いました。 チームをお気に入りとして設定する方法、お気に入りからチームを削除する方法、チームがお気に入りかどうかを確認する方法の3つの方法がある簡単な例を使用してみましょう。
コンポーネント:team.ts
fav() {
this.storage.set(`team ${ this.teamId }`, this.teamName);
this.favorite = true;
}
removeFav() {
this.storage.remove(team ${ this.teamId });
this.favorite = false;
}
この例では、 isFavメソッドをionViewWillEnter ページのライフサイクルフックで使用して、チームがすでにお気に入りであるかどうかを判断できます。