Angular2，Ionic2:如何在手机中存储数据并检索?

Question

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

提前谢谢。任何帮助，不胜感激。

Answer 1

您可以使用本机存储，请从 ionic 文档中检查这一点。 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)
);

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

Answer 2

您可以使用 nativeStorage，但它只能在 cordova 平台上工作(使用 ionic run 或 ionic emulate，但不能使用 ionic serve(

我的解决方案是创建一个带有离子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))
}
})
}
}