全栈工程师_java全栈工程师_全栈开发者学习经验总结

  • 首页
  • 开发工具
    • 软件安装
    • 软件使用
  • 前端
    • Ionic
    • Android
    • Capacitor
    • Angular
    • Vue
    • 苹果开发者账号
  • 后端
    • Java
    • Python
    • MyBatis
    • Spring
    • SpringBoot
    • SpringMVC
    • SpringCloud
  • 服务器
    • Linux
    • MySQL
    • Nginx
    • Tomcat
    • Docker
  • 其他
    • 生活碎片
    • 报错专区
  • 我
lipsuper
专注产出高质量原创手打文章
  1. 首页
  2. 前端
  3. Ionic
  4. 正文

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

2021年2月20日 457点热度 0人点赞 0条评论

在尝试了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) { }

没错,这都是官方文档上的东西,但是,你这样放上去就行了吗?不会的,你会得到报错如下:

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”等报错。

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 踩坑
最后更新:2021年2月20日

lipsuper

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2021004735号-1

渝公网安备 50011202502306号