Ionic(Cordova)でストレージにデータを保存する方法について紹介します。
## 【はじめに】プラグインのインストール
Ionic(Cordova)では、「cordova-sqlite-storage」プラグインを使うことで、簡単にストレージを使えます。
ストレージを使えると、アプリに設定データなどを保存できるようになります。
以下のコマンドを実行し「cordova-sqlite-storage」プラグインをインストールします。
$ cordova plugin add cordova-sqlite-storage --save $ npm install --save @ionic/storage
## 【ルートモジュール】「IonicStorageModule」の読みこみ
ルートモジュールで「IonicStorageModule」を読み込みます。
: import { IonicStorageModule } from '@ionic/storage'; // 追加 @NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicStorageModule.forRoot(), // 追加 IonicModule.forRoot(MyApp) ], : }) export class AppModule {}
## 【入力画面】入力欄とボタン
ホーム画面に入力欄とボタンを作成します。
■src/pages/home/html.html
<ion-content padding> <ion-input type="text" [(ngModel)]="text" id="text"></ion-input> <button ion-button block (click)="saveStorage()">保存</button> <button ion-button block (click)="loadStorage()">読込</button> </ion-content>
「入力欄のデータをボタンでストレージに保存」、「ストレージに保存されたデータの読込」を行います。
■src/pages/home/home.ts
import { Component, OnInit } from '@angular/core'; import { Storage } from '@ionic/storage'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage implements OnInit { text: string; constructor(public storage: Storage) {} ngOnInit(){ this.text = 'エクスカリバー'; } saveStorage(){ this.storage.set('key', this.text); } loadStorage(){ this.storage.get('key') .then((t)=>{ this.text = t; }) .catch((err)=>{ this.text = `Error ${err}`; }); } }
– | 関連記事 |
---|---|
1 | ■【Ionic入門】Android・iOS・Windowsアプリ開発編 |
2 | ■Javascript入門 サンプル集 |
3 | ■Java入門 |
4 | ■Node.js入門 |
コメント