Angular2,Ionic2:如何在移动设备中存储数据并检索它?

时间:2017-07-01 18:37:59

标签: typescript mobile ionic2 local-storage angular2-services

我正在使用Angular2和Ionic2框架开发移动应用程序。该应用程序基本上是一个考试应用程序,要求用户使用该应用程序参加考试。所以我的要求是它应该离线工作,即没有互联网连接。我正在寻找可能的选择,并发现我们可以将考试内容存储在用户的设备上。但我想知道我该怎么做?

提前致谢。任何帮助表示赞赏。

2 个答案:

答案 0 :(得分:1)

您可以使用本机存储,请从离子文档中进行检查。 https://ionicframework.com/docs/native/native-storage/

您需要安装Cordova插件,导入它,将其添加到构造函数中,然后您可以使用它来保存信息

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

这是获取信息

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

但请参阅链接并查看官方文档。

答案 1 :(得分:0)

您可以使用nativeStorage,但它只适用于cordova平台(使用离子运行或离子模拟,但不能使用离子服务)

我的解决方案是创建一个带有离子g提供程序的StorageProvider,我在其中创建了方法:“setItem,getItem”

import { Injectable, Component } from '@angular/core';
import { Http } from '@angular/http';
import { Platform } from 'ionic-angular';
import { NativeStorage } from '@ionic-native/native-storage'


import 'rxjs/add/operator/map';

/*
  Generated class for the StorageProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
@Component({
  providers: [Platform, NativeStorage]
})
export class StorageProvider {

  constructor(public http: Http, private platform: Platform, private nativeStorage: NativeStorage) {
    console.log('Hello StorageProvider Provider');
  }

  setStorage(storageId: string, data: Object){
    return new Promise<any>((resolve, reject)=>{
      if (this.platform.is('cordova')) {
        return this.nativeStorage.setItem(storageId, data).then(res=>{
          resolve(res);
        }).catch(err=>{
          reject(err);
        });
      } else {
        resolve(localStorage.setItem(storageId, JSON.stringify(data)))
      }
    })
  }

  getStorage(storageId: string){
    return new Promise<any>((resolve, reject)=>{
      if (this.platform.is('cordova')){
          this.nativeStorage.getItem(storageId).then(res=>{
            resolve(res);
          }).catch(err=>{
            reject(err);
          })
      } else {
        resolve(localStorage.getItem(storageId))
      }
    })
  }

}