Ionic 4 NativeStorage를 사용하여 스토리지의 데이터를 설정하고 가져오는 방법

블로그

Ionic 4 NativeStorage를 사용하여 스토리지의 데이터를 설정하고 가져오는 방법

오늘 우리는 Ionic 4 NativeStorage를 사용하여 데이터를 저장하는 방법을 배우고 JSON 또는 키-값 쌍 형식으로 로컬 장치에 데이터를 저장하는 방법을 배웁니다.

사용자 장치에 데이터를 저장하는 것은 모든 개발자에게 필수적인 작업이며 거의 모든 웹 또는 모바일 앱에서 필요합니다. 사용자는 장바구니, 사용자 프로필, 앱 설정, 사용자 세션 등 자신의 장치에 모든 데이터를 저장할 수 있습니다.

새로운 Ionic 프로젝트 설치를 시작하겠습니다.

목차

  1. Ionic 프로젝트 구성
  2. Ionic 4에서 기본 저장소 설정
  3. Ionic 앱에서 스토리지 구현
  4. 저장 방법 액세스
  5. 결론

1. Ionic 프로젝트 구성

이 튜토리얼을 시작하기 위해 새로운 Ionic/Angular 앱을 설치해 보겠습니다.

# Update Ionic CLI sudo npm update -g ionic # Create new Ionic app ionic start ionic-storage blank --type=angular # Enter inside project cd ./ionic-storage

테스트 목적으로 개발 종속성으로 랩 모드를 설치하는 명령을 실행합니다.

메리 캐리 반 다이크
npm i @ionic/lab --save-dev

Ionic Local Storage 프로젝트를 시작합니다.

ionic serve -l

2. Ionic 4에서 기본 저장소 설정

명령을 실행하여 Cordova를 설치하십시오. 네이티브 스토리지 플러그인.

ionic cordova plugin add cordova-plugin-nativestorage

스토리지 기능을 사용하기 위한 Ionic Native 플러그인을 설치하는 명령어를 실행합니다.

npm install @ionic-native/native-storage

애플리케이션 전체에서 네이티브 스토리지 플러그인을 사용하려면 가져오기 및 등록 네이티브 스토리지 모듈 앱 모듈 .

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { NativeStorage } from '@ionic-native/native-storage/ngx'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], providers: [ StatusBar, SplashScreen, NativeStorage, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent] }) export class AppModule { }

3. Ionic App에서 스토리지 구현

Ionic은 스토리지에 데이터를 저장하는 두 가지 방법을 제공합니다.

3.1 Ionic Cordova SQLite의 저장

Cordova의 sqlite 스토리지 플러그인은 데이터를 |_+_|에 저장하는 데 사용됩니다. 쌍 및 JSON 형식, Ionic의 스토리지 모듈을 Cordova의 코르도바-sqlite-저장소 플러그인.

Ionic 4의 SQLite 모바일 장치에서 작동하는 기본 앱에 사용됩니다. localStorage 또는 IndexedDB는 프로그레시브 웹 앱에 데이터를 저장하는 데 사용되며 단순히 브라우저에서 작동합니다. 그러나 가장 좋은 방법은 플랫폼과 요구 사항에 따라 선택됩니다.

3.2 코르도바 네이티브 스토리지

코르도바 cordova-plugin-nativestorage 플러그인은 더 빠르고 더 많은 데이터 저장 공간을 제공합니다. iOS, Android 및 Windows용 기본 저장소에 적합합니다.

이 튜토리얼에서는 Cordova의 기본 스토리지를 사용하여 작업하는 방법을 배웁니다. cordova-plugin-nativestorage 플러그인.

Ionic/Angular 프로젝트 설치를 시작하겠습니다. 다음 명령을 실행하여 새 Ionic 4 애플리케이션을 만듭니다.

넷기어 와이파이 익스텐더 ac1200 설정 방법

기본 저장 방법에 액세스하려면 가져오기가 필요합니다. 네이티브 스토리지 플러그인을 홈 템플릿에 삽입하고 건축업자 .

key/value

4. 저장 방법 접근

이제 네이티브 스토리지 방법을 사용하여 데이터를 빠르게 가져오고 설정할 수 있습니다.

4.1 값 저장

nativeStorage를 사용하여 로컬 스토리지의 일부 데이터 설정을 시작하겠습니다. |_+_| 방법.

로컬 저장소에 값을 저장합니다.

import { Component } from '@angular/core'; import { NativeStorage } from '@ionic-native/native-storage/ngx'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { constructor(private nativeStorage: NativeStorage) { } } setItem

4.2 값 가져오기

nativeStorage를 사용하여 로컬 스토리지에서 데이터 검색을 시작하겠습니다. getItem 방법.

로컬 스토리지에서 가치를 얻으려면.

setItem(storageRef: string, value: any) this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'}) .then( () => console.log('Stored item!'), error => console.error('Error storing item', error) );

4.3 모든 키 가져오기

nativeStorage를 사용하여 로컬 스토리지에서 데이터 검색을 시작하겠습니다. getItem 방법.

getItem(storageRef: string, value: any)

4.4 값 제거

스토리지에서 값을 제거하려면 다음 방법을 사용하십시오.

this.nativeStorage.getItem('myitem') .then( data => console.log(data), error => console.error(error) );

4.5 저장된 모든 값 제거

저장소에서 모든 저장된 값을 제거하려면 아래 주어진 방법을 사용하십시오.

this.nativeStorage.keys() .then( data => console.log(data), error => console.error(error) );

5. 결론

마침내, 우리는 완료 Ionic 4 스토리지 튜토리얼 이 튜토리얼에서는 NativeStorage를 사용하여 스토리지에 데이터를 설정하고 가져오는 방법을 배웠습니다.

#Ionic #Angular #데이터베이스