Ionic2+でのストレージの使用

getdocs

2年前

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 ページのライフサイクルフックで使用して、チームがすでにお気に入りであるかどうかを判断できます。