ionic 개발 - Local Storage 사용하기

0. 개발 환경

$ ionic -v
6.1.0

$ node -v
v12.16.0

$ npm -v
6.13.4

$ cordova -v
9.0.0 (cordova-lib@9.0.1)

1. 프로젝트 생성하기

$ ionic start 프로젝트명 blank

2. 기본 화면 구성하기

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-button expand="block" style="margin: 10%" (click)="goDetail()">ADD</ion-button>

  <!-- List of Sliding Items -->
  <ion-list *ngFor="let item of this.storageService.itemList">
    <ion-item-sliding>
      <ion-item>
        <ion-label>{{item.name}}</ion-label>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option (click)="deleteItem(item)" color="danger">
          <ion-icon name="trash-outline"></ion-icon>Delete
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

home page에서는 입력할 수 있는 페이지인 detail page로 이동할 수 있는 ADD 버튼을 추가하고 버튼 아래로 Local Storage에 저장된 item들을 볼 수 있는 리스트를 생성한다.

<ion-header>
  <ion-toolbar>
    <ion-title>detail</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- Inputs with labels -->
  <ion-item>
    <ion-label position="floating">Item Name</ion-label>
    <ion-input [(ngModel)]="name"></ion-input>
  </ion-item>

  <ion-button expand="block" style="margin: 5%" (click)="saveItem()">SAVE</ion-button>
</ion-content>

detail page에서는 아이템의 이름을 입력할 수 있는 input 창과 Local Storage에 item을 저장할 SAVE 버튼으로 구성된다.

 

3. Local Storage Package 설치하기

$ npm install --save @ionic/storage

 

ionic에서 제공하는 storage를 사용하기 위해 위와 같은 package를 설치한다.

 

4. Local Storage Module 사용하기

...
import { IonicStorageModule } from '@ionic/storage';
...
@NgModule({
  ...
  imports: [..., IonicStorageModule.forRoot()],
  ...
})
...

앱 전체에서 IonicStorageModule을 사용할 수 있도록 설정을 추가한다.

 

5. Local Storage를 사용하는 Service 생성

import { Injectable } from '@angular/core';

import { Storage } from '@ionic/storage';

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  itemList = [];

  constructor(private storage: Storage) { }

  // Local Storage에 itemList 저장하기
  saveItemList() {
    this.storage.set('itemList', this.itemList).then(() => {
      console.log('save complete!');
    });
  }

  // itemList에 item 저장하기
  addItem(item) {
    this.itemList.push(item);
    this.saveItemList();
  }

  // Local Storage에서 itemList 가져오기
  getItemList() {
    this.storage.get('itemList').then(result => {
      if (result) {
        this.itemList = result;
      }
    });
  }

  // itemList에서 item 삭제하기
  deleteItem(item) {
    this.itemList.splice(this.itemList.indexOf(item), 1);
    this.saveItemList();
  }
}

itemList에 item을 저장, 삭제하고 Local Storage에 itemList를 추가하고 가져오는 기능을 수행하는 서비스를 생성한다.

 

6. 화면에서 버튼 클릭에 따른 이벤트 구현하기

import {Component, OnInit} from '@angular/core';

import { NavController } from '@ionic/angular';

import { StorageService } from '../storage.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  constructor(private navController: NavController, private storageService: StorageService) {}

  ngOnInit(): void {
    // Local Storage에서 itemList 가져오는 함수 실행
    this.storageService.getItemList();
  }

  // Delete 버튼을 누른 경우
  deleteItem(item) {
    // itemList에서 item을 삭제하는 함수 실행
    this.storageService.deleteItem(item);
  }

  // ADD 버튼을 누른 경우
  goDetail() {
    // detail 페이지로 이동
    this.navController.navigateForward('detail');
  }

}

home page가 처음 실행되면 storage 서비스에서 제공하는 getItemList() 함수를 사용하여 Local Storage로부터 itemList를 가져온다. ADD 버튼을 클릭하면 NavController를 사용하여 detail page로 이동한다.

리스트에 보이는 item을 왼쪽으로 밀어 보이는 Delete 버튼을 클릭하면 storage 서비스에서 제공하는 deleteItem() 함수를 사용하여 itemList에서 해당 item을 삭제하고 Local Storage에 수정된 itemList를 새로 저장하게 된다.

 

import { Component, OnInit } from '@angular/core';

import { NavController } from '@ionic/angular';

import { StorageService } from '../storage.service';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.page.html',
  styleUrls: ['./detail.page.scss'],
})
export class DetailPage implements OnInit {

  name: string;

  constructor(private navController: NavController, 
  			  private storageService: StorageService) { }

  ngOnInit() {
  }

  // SAVE 버튼을 누른 경우
  saveItem() {
    const item = {name: this.name};     // item 객체 생성
    this.storageService.addItem(item);  // itemList에 item을 저장하는 함수 실행
    // 다시 home 페이지로 이동
    this.navController.navigateBack('home');
  }
}

detail page에서는 input 창에 아이템의 이름을 입력하면 [(ngModule)]로 관리되는 name 변수에 값이 바로 저장된다. 입력을 마치고 SAVE 버튼을 클릭하면 storage에서 제공하는 addItem() 함수를 사용하여 생성한 item을 itemList에 추가한 뒤 Local Storage에 저장한다. 이후 다시 home page로 이동하게 된다.

 

7. 결과

https://github.com/hanbee1005/ionic_localstorage

hanbee1005/ionic_localstorage