こんにちは、初めての方は初めまして。
AstCrowと申します。ちょっと最近おサボり気味なので気を引き締めていこうと思います。
タイトルのとうりですが、この回ではionicでの制作で使ったデータの保存、主にstorageについて書いていこうかなと思います。
SQliteも書こうと思っていたのですが、思った以上に長くなってしまったため記事を分けることにしました。
ionicで何かデータを保存させるようなアプリを作りたい方は是非是非。私が制作したアプリのAstでは入力フォームからの数値や文字列、チェックの可否を登録しているため、主にテキストと文字列の保存がメインとなっております。
今回は
- storageについて
- storageの準備
- storageの使い方
storageについて
特徴的なのはデータをキー(key)、バリュー(value)で保存すること。jsonの形ですね。
バリューにはjsonをそのまま格納できてしまいます。なのでtypescriptで書いた配列を丸っとそのまま保存や取り出しができたりとなかなか便利です。
また使用している環境によってデータの保存場所が変わり基本的にSQLite > ndexedDB > WebSQL > localstorageといった感じでデータベースが使えればそちら優先で保存されるよう。
もちろん場所指定することも可能です。
Amdroid/iOSのアプリにする場合はcordova-sqlite-storageのプラグインが必須です。（要はアプリ内ではブラウザではないしndexedDB、WebSQL、localstorageが使えないので、SQLiteのプラグイン入れてSQliteに保存できるようにさせているらしい）
ちなみに上記の保存場所が変わる関係でブラウザ上でデータの保存等の確認が行えるのは利点だと思います。デザインも一緒に確認しながら動きも見れますので。
storageの準備
非常にとっつきやすいです。データベースの知識がなくとも使えます。
フレームワークはインストールされていない場合はインストールがまず最初。
最初にインストールするアプリのデータを開いて
cd ●●インストールするフォルダ名のファイルパス●●〜
を入力してエンターで開く。
まずはstorageのフレームワークを追加。
npm install @ionic/storage-angular
を入力してエンター。
Amdroid/iOSのアプリにする場合はcordova-sqlite-storageのプラグインも追加。
ionic cordova plugin add cordova-sqlite-storage
を入力してエンターで追加。
これで必要なものはインストールされています。
ここからstorageを使うための記述をtsファイルに追加していきます。
app.module.tsに追加
import { ~~} from '~~/~~';
import { IonicStorageModule } from '@ionic/storage';
@NgModule({
declarations: [ ~~ ],
imports: [ ~~,
IonicStorageModule.forRoot() ],
~~ })
export class AppModule {}
フレームワークの追加状況によって皆差異があると思いますが、上記の赤字を該当箇所に追加する感じです。
後ろに追加する際は前文後ろの「,」を忘れないように！（小生はよく忘れます…）
次に使用するページのtsファイルに下記を追加
使用ページのtsファイル
import { ~~} from '~~/~~';
import { Storage } from '@ionic/storage';
@Component({ ~~ })
export class ●ページ名● {
constructor(~~, ~~, private storage: Storage) { ~~ }
ngOnInit() {
this.storage.create(); //最初にstorageで登録データを作る。既にある場合は無視されるので記述は残しておいてもOK
}
////////// ここにstorageの登録やら削除やら記述を行う //////////
}
ここまで入れたら使用準備OK!です。実際のデータを保存するソースを上記青の箇所にゴリゴリ書いていきます。
storageの使い方
storageにデータを登録する場合。
save(){ //何か登録する際のイベント
this.storage.set('●キー（ざっくりタイトルのようなもの）●' , ●バリュー（保存するデータ）●);
}
storageからデータを取り出す場合。
get(){ //何かデータを取り出す際のイベント
this.storage.get('●とりだしたいデータのキー●' ).then((t)=>{
/////tにデータが格納されているのでそれをあれこれしたり コンソールに出すならconsole.log(t);とか
});
}
storageからデータを削除する場合。
remove(){ //何かデータを取り出す際のイベント
this.storage.remove('●削除したいデータのキー●' );
}
storageから現状登録されているキー名を表示する場合。
remove(){ //何かデータを取り出す際のイベント
storage.keys();
}
とまあこんな感じでしょうか。
他にもキー・バリューのペアを列挙させたりキーの数を表示させたりできますが主な使用方法はざっくり書けたかなと。
もっと詳しい使い方も知りたい方はこちらをどうぞ。英語ですが…。
ともかく数行の記述で簡単にデータを保存したり収得することができます。
簡単ですし、jsonをそのままバリューに放りこめるのは便利なんじゃないでしょうか。
ちなみに使用している環境によってデータの保存場所が変わるのですが、指定をすることもできます。
保存場所を指定する場合はapp.module.tsに下記追加変更
import { ~~} from '~~/~~';
import { Drivers } from '@ionic/storage';
import { IonicStorageModule } from '@ionic/storage';
@NgModule({
declarations: [ ~~ ],
imports: [ ~~,
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: [Drivers.SecureStorage, Drivers.IndexedDB, Drivers.LocalStorage] //ここの順序を変更
})
],
~~ })
export class AppModule {}
ざっくりこんな感じです。
最後に
最初はstorageとSQLiteの２つをまとめて記事にするつもりだったのですが、書いてみたら思った以上に長くなってしまいました…。SQliteは忘れないよう関数も一部メモとして書いておこうと思ったので多分これより長くなると思います。
次回はSQliteのデータ保存について書いておこうと思います。