在尝试了ionic的几种本地存储方案以后,综合对比之后,我最终还是回到了nativestorage的怀抱。
操作步骤
首先要安装插件:
# 下载cordova插件
ionic cordova plugin add cordova-plugin-nativestorage
# 安装ionic的原生支持插件并保存到package.json文件中
npm install @ionic-native/native-storage --save
然后就是使用:
在需要使用的页面的ts文件中,首先导入依赖,然后在构造器中声明:
import { NativeStorage } from '@ionic-native/native-storage/ngx';
constructor(private nativeStorage: NativeStorage) { }
没错,这都是官方文档上的东西,但是,你这样放上去就行了吗?不会的,你会得到报错如下:
为什么会报错呢?因为你还没有在app.module.ts
文件中声明它。找到app.module.ts
文件,在头部添加如下依赖:
import { NativeStorage } from '@ionic-native/native-storage/ngx';
然后再在provider
的方括号中添加NativeStorage声明
:
providers: [
...
NativeStorage,
...
],
此时再在别的模块中引用NativeStorage
的时候就不会报错了。
存储单个数据(比如存储我的名字):
this.nativeStorage.setItem('myinfo', {name: 'lipsuper'})
.then(
() => console.log('保存成功!'),
error => console.error('保存异常!', error)
);
存储多个数据(比如存储我的名字和性别):
this.nativeStorage.setItem('myinfo', {name: 'lipsuper', gender: 'male'})
.then(
() => console.log('保存成功!'),
error => console.error('保存异常!', error)
);
获取数据:
this.nativeStorage.getItem('myinfo')
.then(
data => console.log(data),
error => console.error(error)
);
注意
假如你需要在一进入APP的时候就调用NativeStorage,你需要这样做才能保证NativeStorage不报错:
...
import { Platform } from '@ionic/angular';
...
constructor(private platform: Platform) {}
...
this.platform.ready().then(() => {
// 在这里面调用NativeStorage
});
也就是说,你要等设备准备好以后才能调用cordova的插件,否则你就有可能遇到诸如“NativeStorage not installed”等报错。
文章评论