【Ionic】ストレージにデータを保存

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}`;
      });
  }
}