c3에서 하이브리드 앱을 만들어 보자. - 데이터 지속성 편

마지막까지

도입편
전이편

개요

앱 내에서 데이터를 보관하고 싶을 때가 있습니다. 어쩌면. 확실히.
앱에서 설정이라든지 할 때라든가.
그런 때 cordova-sqlite-storage 를 사용해 갑니다.
공식 문서

이번에는 쉽게 버튼을 누르면 현재 시간을 저장하고 다른 페이지에서 표시해 봅시다.

플러그인 추가

명령으로 플러그인 설치

$ ionic cordova plugin add cordova-sqlite-storage
$ npm install --save @ionic-native/sqlite

루트 모듈 추가 설정

지난번 그래도 했는데 모듈을 추가했으면 루트 모듈에 설정이 필요했습니다.

src/app/app.module.ts

import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { IonicStorageModule } from '@ionic/storage'; // ←追加

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { NextPageModule } from '../pages/next/next.module';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    NextPageModule,
    IonicStorageModule.forRoot()  // ←追加
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

이상 추가 두 줄을 추가합니다.
이제 준비가 되었습니다.

데이터 저장

버튼 설치

데이터를 저장하는 트리거를 설정합시다.HomePage 에 버튼을 추가하여 현재 시간을 저장합니다.

src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="saveTime()">現在時刻を保存</button>
  <button ion-button (click)="toNextPage()">next</button>
</ion-content>

페이지 천이의 버튼의 앞에 「현재 시각을 보존」하는 버튼을 설치했습니다.
클릭하면 saveTime() 라는 처리를 합시다.

현재 시간 저장

saveTime() 의 내용을 씁니다.

src/pages/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NextPage } from '../next/next';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private storage: Storage) {
  }

  // NextPageへ遷移
  toNextPage(){
    this.navCtrl.push(NextPage);
  }

  // 現在時刻を保存
  saveTime(){
    let now = new Date();
    this.storage.set('time', now.getHours()+'-'+now.getMinutes()+'-'+now.getSeconds());
   }
}

변경점은
1. import 에서 모듈 로드
2. constructor 인수 추가
3. saveTime() 라는 현재 시간을 저장하는 처리 추가

3에서는 time라는 키로 현재 시간을 응용 프로그램 내부에 저장합니다.

저장된 데이터 가져오기

데이터의 저장은 할 수 있었을 것이므로, 이번에는 저장한 데이터의 취득을 합니다.
보려면 NextPage로 합시다.

데이터를 취득하는 처리

src/pages/next/next.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';

/**
 * Generated class for the NextPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-next',
  templateUrl: 'next.html',
})
export class NextPage {
  outputTime:string;

  constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage) {

    // timeというキーで保存してあるデータを取り出します。
    this.storage.get("time").then(savedTime => {
      this.outputTime = savedTime;
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad NextPage');
  }
}

import에서 Storage 모듈로드

constructor 에 인수 추가

저장된 time라는 키의 데이터를 검색하고 outputTime라는 변수를 html에서 사용할 수 있도록

이상 3점이 변경이네요.

획득한 데이터 표시

NextPage에서 얻은 데이터를 표시합니다.

src/pages/next/next.ts

<!--
  Generated template for the NextPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>nextPage</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <p>{{ outputTime }}</p>
</ion-content>

추가하는 것은 <p>{{ outputTime }}</p> 의 일행 뿐입니다.

움직여 보자

$ ionic cordova run ios

일단 버튼을 눌러 페이지 천이했을 때만, nextPage로 시간이 갱신되고 있습니다.

　.

　.

　.

이해하기 어렵다! ! ! ! ! !
같은 페이지에서 해라! ! ! !

맞습니다. 벌써 써버렸고, 좋을까.
그럼에도 불구하고 데이터의 지속성입니다.
물론 앱을 제거할 때까지 데이터를 계속 유지합니다.

이상

덤

데이터를 검색할 때 strage.get(...) 했지만 등록되지 않은 키를 검색하려고 하면 null 가 되어 오류가 발생하지 않았습니다.