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) 遍历数据库
分享到:
相关推荐
示例可能包含自定义服务,如数据存储或API调用,你可以学习如何创建和注入服务。 7. **生命周期钩子**:了解`Ionic2`组件的生命周期钩子,如`ngOnInit`和`ngOnDestroy`,这些可以帮助你在特定时间执行代码,如初始...
- **SQLite**:用于更复杂的数据存储需求。 - **Cordova插件**:如`cordova-plugin-sqlite2`用于支持SQLite数据库。 ##### 第十一课:获取数据,Observable和Promise - **HTTP客户端**:Angular提供的HttpClient...
4. **数据管理**:学习如何使用Angular的服务和 RxJS(Reactive Extensions for JavaScript)进行数据的获取、存储和更新,实现异步编程和状态管理。 5. **路由与导航**:了解Ionic 2中的路由系统,学习如何设置...
在Ionic 1项目中,SQLite 是实现离线数据存储的理想选择,特别是在需要对数据进行保存、删除、修改和查询等操作时。 ### SQLite 与 Ionic 结合 1. **安装插件**: 在使用SQLite之前,需要安装对应的Cordova插件。...
Ionic2支持多种数据存储方式,包括LocalStorage、SQLite以及Ionic自带的IonicStorage。开发者可以根据应用需求选择合适的存储方案来持久化数据。 ### 数据获取: - **observables和Promises**:Ionic2使用...
// 定义数据数组,例如从API获取或本地存储的数据 let data = [ ['姓名', '年龄', '性别'], ['张三', 25, '男'], ['李四', 30, '女'] ]; // 将数据转换为工作表 let ws = XLSX.utils.aoa_to_sheet(data); // ...
同时,可以结合后端服务,处理图片的上传、存储和访问权限,确保数据的安全性。 4. **实时地图**: 为了实现地图功能,Ionic2可以集成Google Maps或Mapbox等地图服务。通过引入相应的JavaScript库,可以创建地图...
- **步骤3**: 编辑`data.ts`文件实现数据的存储与读取。 ```typescript constructor(public navCtrl: NavController, public modalCtrl: ModalController, public dataService: Data) { this.dataService.get...
- **LocalStorage**:一种简单的客户端数据存储技术,适用于存储少量非敏感数据。 - **SQLite**:一个轻量级的关系型数据库管理系统,适用于存储大量数据。 - **Ionic Storage**:Ionic提供的一个插件,用于简化本地...
- **服务**:提供共享的功能,如数据存储、网络请求等。 #### 模板语法 - **星号语法 (`*ngIf`, `*ngFor`)**:用于条件渲染和循环遍历数组。 - **循环 (`*ngFor`)**:遍历数组并为每个元素生成一个模板实例。 - *...
在本文中,我们将探讨如何利用Ionic2和Angular4框架实现一个自定义的地区选择组件。...开发者可以通过引入这个组件,通过输入地区数据和配置选项,轻松地在Ionic2 + Angular4应用中集成地区选择功能。
- `services`: 提供应用级别的服务,如HTTP请求服务、数据存储服务等。 - `assets`: 存放应用的静态资源,如图片、字体等。 - `environments`: 配置文件,区分开发环境和生产环境。 - `ionic.config.json`: Ionic...
3. **数据管理**:商品信息、用户数据、订单状态等都需要妥善存储和管理。Ionic通常结合Angular的HttpClient服务与后端API交互,获取和提交数据。同时,本地存储(如localStorage或IndexedDB)可以用于缓存数据,...
`all-restaurant` 文件可能是系统中所有餐厅相关数据的集合,可能包含了菜品信息、库存数据、订单记录等内容,这些数据在系统中被 `SpringMVC` 处理并存储,供 `Ionic2` 前端展示和交互。 总之,智慧点餐系统利用 `...
9. 数据存储和操作:Ionic2应用可以使用本地存储来保存和获取数据。这包括使用Ionic Native插件访问原生设备功能,以及利用Angular的Observable和Promise等异步数据处理方法。 10. 自定义样式和主题:开发者可以...
9. **数据存储与API通信**:“吃乎2”可能需要与后端服务器进行通信,获取或存储美食数据。这涉及到了RESTful API的调用、数据序列化和反序列化、错误处理等技能。 10. **持续集成与部署**:现代开发流程中,持续...
《Learning Ionic 2 - Second Edition》是一本关于学习Ionic 2框架的书籍,Ionic 2是一个广泛使用的跨平台移动应用开发框架,它基于Angular 2。此框架的特点是运行速度快,插件丰富,使得开发者能便捷地使用HTML5、...
【标题】"Ionic2Demo" 是一个基于 Ionic 2 框架开发的移动应用示例项目。这个项目展示了如何使用 Ionic 2 来构建功能丰富的跨平台移动应用。 【描述】"ionic2demo" 提供了对 Ionic 2 的实际操作体验,包括组件、...
IndexedDB或WebSQL均有存储空间的限制,如果想要在ionic mobile app中获得“无限制”存储,最好还是使用SQLite。如果安装了Cordova SQLite插件,那么PouchDB将会自动使用SQLite数据库。 注:SQLite的速度确实要比...
Ionic 是基于 Angular 构建的,这意味着它充分利用了 Angular 的数据绑定、依赖注入和模块化等特性。Angular 提供了一种声明式编程方式,使得前端开发更加高效,而 Ionic 则在此基础上提供了针对移动设备优化的UI...