`
maxer025
  • 浏览: 79680 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

Ionic2的数据存储

 
阅读更多
Ionic2的数据存储
翻译 2017年03月29日 14:50:51

当在一个原生app词法环境下,一般优先使用SQLite,因为它是使用最广泛的稳定的文档型数据库之一,它也避免了一些诸如localstorage和IndexedDB的一些困境,比如系统在磁盘空间不够的时候会清除数据。

如果你是在web中或者web app中运行的话,一般倾向于使用IndexedDB,WebSQL,以及localstorage.

假如你使用的是SQLite,首先你得安装 cordova-sqlite-storage 插件。

cordova plugin add cordova-sqlite-storage --save

    1

然后npm按照包:

npm install --save @ionic/storage

    1

之后import这个插件,在你的NgModule的imports的数组中,将模块注入进app里。

下面就是一个实例:

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot() //就这里
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: []
})
export class AppModule {}

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

这样,你如果在那个component中需要使用数据库的时候你就可以通过import进行注入:

import { Storage } from '@ionic/storage';

export class MyApp {
  constructor(storage: Storage) {

     storage.ready().then(() => {

       // set a key/value
       storage.set('name', 'Max');

       // Or to get a key/value pair
       storage.get('age').then((val) => {
         console.log('Your age is', val);
       })
     });
  }
}

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    配置存储

开发者可以使定义好的存储引擎优先级配置存储引擎,或者自定义配置选项到localForage上。

注意:任何自定义的配置都会被合并到默认配置上。

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: ...,
  imports: [
    IonicStorageModule.forRoot({
      name: '__mydb',
         driverOrder: ['indexeddb', 'sqlite', 'websql']
    })
  ],
  bootstrap: ...,
  entryComponents: ...,
   providers: []
})
export class AppModule {}

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

下面就是数据库的使用方法:

    driver 获取驱动名称
    ready()反应存储
    get(key)获取对应数据
    set(key,value) 设置数据
    remove(key)删除对应数据
    clear()清除所有数据
    length()获取数据长度
    keys()获取键
    forEach(callback) 遍历数据库

分享到:
评论

相关推荐

    ionic2 new demo

    示例可能包含自定义服务,如数据存储或API调用,你可以学习如何创建和注入服务。 7. **生命周期钩子**:了解`Ionic2`组件的生命周期钩子,如`ngOnInit`和`ngOnDestroy`,这些可以帮助你在特定时间执行代码,如初始...

    使用Ionic2制作移动应用

    - **SQLite**:用于更复杂的数据存储需求。 - **Cordova插件**:如`cordova-plugin-sqlite2`用于支持SQLite数据库。 ##### 第十一课:获取数据,Observable和Promise - **HTTP客户端**:Angular提供的HttpClient...

    Building Mobile Apps with Ionic 2 final2.0 (附项目源码)

    4. **数据管理**:学习如何使用Angular的服务和 RxJS(Reactive Extensions for JavaScript)进行数据的获取、存储和更新,实现异步编程和状态管理。 5. **路由与导航**:了解Ionic 2中的路由系统,学习如何设置...

    ionic使用sqlite存储数据

    在Ionic 1项目中,SQLite 是实现离线数据存储的理想选择,特别是在需要对数据进行保存、删除、修改和查询等操作时。 ### SQLite 与 Ionic 结合 1. **安装插件**: 在使用SQLite之前,需要安装对应的Cordova插件。...

    用Ionic2编写移动应用程序

    Ionic2支持多种数据存储方式,包括LocalStorage、SQLite以及Ionic自带的IonicStorage。开发者可以根据应用需求选择合适的存储方案来持久化数据。 ### 数据获取: - **observables和Promises**:Ionic2使用...

    ionic 导出excel实现方案

    // 定义数据数组,例如从API获取或本地存储的数据 let data = [ ['姓名', '年龄', '性别'], ['张三', 25, '男'], ['李四', 30, '女'] ]; // 将数据转换为工作表 let ws = XLSX.utils.aoa_to_sheet(data); // ...

    ionic2 前段框架(可以运行)

    同时,可以结合后端服务,处理图片的上传、存储和访问权限,确保数据的安全性。 4. **实时地图**: 为了实现地图功能,Ionic2可以集成Google Maps或Mapbox等地图服务。通过引入相应的JavaScript库,可以创建地图...

    ionic2入门学习PPT

    - **步骤3**: 编辑`data.ts`文件实现数据的存储与读取。 ```typescript constructor(public navCtrl: NavController, public modalCtrl: ModalController, public dataService: Data) { this.dataService.get...

    EXPERT-Building-Mobile-Apps-with-Ionic-2

    - **LocalStorage**:一种简单的客户端数据存储技术,适用于存储少量非敏感数据。 - **SQLite**:一个轻量级的关系型数据库管理系统,适用于存储大量数据。 - **Ionic Storage**:Ionic提供的一个插件,用于简化本地...

    Building-Mobile-Apps-with-Ionic-2

    - **服务**:提供共享的功能,如数据存储、网络请求等。 #### 模板语法 - **星号语法 (`*ngIf`, `*ngFor`)**:用于条件渲染和循环遍历数组。 - **循环 (`*ngFor`)**:遍历数组并为每个元素生成一个模板实例。 - *...

    利用Ionic2 + angular4实现一个地区选择组件

    在本文中,我们将探讨如何利用Ionic2和Angular4框架实现一个自定义的地区选择组件。...开发者可以通过引入这个组件,通过输入地区数据和配置选项,轻松地在Ionic2 + Angular4应用中集成地区选择功能。

    这是一个使用Ionic2开发的集数据展示,交易,交流于一体的APP.zip

    - `services`: 提供应用级别的服务,如HTTP请求服务、数据存储服务等。 - `assets`: 存放应用的静态资源,如图片、字体等。 - `environments`: 配置文件,区分开发环境和生产环境。 - `ionic.config.json`: Ionic...

    ionic购物商城demo源码

    3. **数据管理**:商品信息、用户数据、订单状态等都需要妥善存储和管理。Ionic通常结合Angular的HttpClient服务与后端API交互,获取和提交数据。同时,本地存储(如localStorage或IndexedDB)可以用于缓存数据,...

    智慧点餐系统源码/ionic2/springmvc

    `all-restaurant` 文件可能是系统中所有餐厅相关数据的集合,可能包含了菜品信息、库存数据、订单记录等内容,这些数据在系统中被 `SpringMVC` 处理并存储,供 `Ionic2` 前端展示和交互。 总之,智慧点餐系统利用 `...

    使用Ionic2制作移动APP

    9. 数据存储和操作:Ionic2应用可以使用本地存储来保存和获取数据。这包括使用Ionic Native插件访问原生设备功能,以及利用Angular的Observable和Promise等异步数据处理方法。 10. 自定义样式和主题:开发者可以...

    ionic2example吃乎2一款美食app

    9. **数据存储与API通信**:“吃乎2”可能需要与后端服务器进行通信,获取或存储美食数据。这涉及到了RESTful API的调用、数据序列化和反序列化、错误处理等技能。 10. **持续集成与部署**:现代开发流程中,持续...

    Learning Ionic 2 - Second Edition

    《Learning Ionic 2 - Second Edition》是一本关于学习Ionic 2框架的书籍,Ionic 2是一个广泛使用的跨平台移动应用开发框架,它基于Angular 2。此框架的特点是运行速度快,插件丰富,使得开发者能便捷地使用HTML5、...

    ionic2demo

    【标题】"Ionic2Demo" 是一个基于 Ionic 2 框架开发的移动应用示例项目。这个项目展示了如何使用 Ionic 2 来构建功能丰富的跨平台移动应用。 【描述】"ionic2demo" 提供了对 Ionic 2 的实际操作体验,包括组件、...

    ionic 通过PouchDB + SQLite来实现app的本地存储demo

    IndexedDB或WebSQL均有存储空间的限制,如果想要在ionic mobile app中获得“无限制”存储,最好还是使用SQLite。如果安装了Cordova SQLite插件,那么PouchDB将会自动使用SQLite数据库。 注:SQLite的速度确实要比...

    ionic模版源代码

    Ionic 是基于 Angular 构建的,这意味着它充分利用了 Angular 的数据绑定、依赖注入和模块化等特性。Angular 提供了一种声明式编程方式,使得前端开发更加高效,而 Ionic 则在此基础上提供了针对移动设备优化的UI...

Global site tag (gtag.js) - Google Analytics