Ionic nativestorage的使用方法以及注意事项

在尝试了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”等报错。