不管是真機還是H5，都有提供sqlite數據庫進行存儲數據。那么我們只要封裝好函數就能隨意調用了。

如果只是存儲簡單的鍵值對形式的話，ionic官網也提供了一個兼容網頁的storage，https://ionicframework.com/docs/storage，但只能key/value ，當然value可以是Json。

但是很多時候為了前后端數據保存一致，所以前端也采用多字段存儲，那么只能自己封裝函數處理了。

*如果websql支持的瀏覽器無法滿足自己的需求，請使用IndexedDB

1. 安裝數據庫操作插件

$ ionic cordova plugin add cordova-sqlite-storage

$ npm install --save @ionic-native/sqlite

所有的原生插件和自定義provider都要在app.module的providers中聲明

import { SQLite } from '@ionic-native/sqlite';

@NgModule({

declarations: [

MyApp

],

imports: [

HttpModule,

JsonpModule,

BrowserModule,

IonicModule.forRoot(MyApp, {

})

],

bootstrap: [IonicApp],

entryComponents: [

MyApp

],

providers: [

SQLite

]

})

export class AppModule { }

2. 封裝調用函數

控制臺輸入命令創建provider

$ ionic g provider native

執行后目錄如下：

1.png

填入//異步問題進行修改

import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

import { Injectable } from '@angular/core';

import { Platform , Events } from 'ionic-angular';

import { StorageServiceProvider } from '../../providers/storage-service/storage-service';

@Injectable()

export class NativeProvider {

database: SQLiteObject;

win_db: any;//H5數據庫對象

win: any = window;//window對象

constructor( private platform: Platform,

private sqlite: SQLite，

private events: Events,

private storage: StorageServiceProvider) { }

/**

* 創建數據庫

*/

createDb() {

if (this.isMobile()) {

this.sqlite.create({

name: 'data.db',

location: 'default'

})

.then((db: SQLiteObject) => {

this.database = db;

//創建表如果已存在就創建

if (this.storage.read('db:create') != "Yes") {

//創建表

this.createTable();

} else {

this.events.publish('db:create');

}

})

.catch(e => {

this.showAlert(this.text.CREATE_DB);

this.events.publish('db:create');

});

} else {

//H5數據庫存儲，注意測試瀏覽器兼容，websql w3c沒維護

try {

this.win_db = this.win.openDatabase("data.db", '1.0', 'database', 5 * 1024 * 1024);//聲明H5 數據庫大小

this.createTable();

} catch (err) {

console.log('創建數據庫失敗')

}

}

}

/**

* 創建表

*/

async createTable() {

// this.querySql('', []);

//可能存在多個執行創建表語句，只需最后一個使用await

await this.executeSql('CREATE TABLE remindMaster(remind_id INTEGER PRIMARY KEY AUTOINCREMENT,user_id TEXT,state TEXT , content TEXT,remind_time TEXT,create_time TEXT)', []);

this.events.publish('db:create');

this.storage.write('db:create', "Yes");

}

/**

* 執行語句

*/

executeSql(sql: string, array: Array): Promise {

return new Promise((resolve, reject) => {

if (this.isMobile()) {

if (!!!!this.database) {

this.database.executeSql(sql, array).then((data) => {

resolve(data);

}, (err) => {

reject(err);

console.log('Unable to execute sql: ' + err);

});

} else {

return new Promise((resolve) => {

resolve([]);

});

}

} else {

if (this.win_db) {

return this.execWebSql(sql, array).then(data => {

resolve(data);

}).catch(err => {

console.log(err);

});

}

}

});

}

/**

* 查詢H5數據庫

*/

execWebSql(sql: string, params: Array): Promise {

return new Promise((resolve, reject) => {

try {

this.win_db.transaction((tx) => {

tx.executeSql(sql, params,

(tx, res) => resolve(res),

(tx, err) => reject(err));

},

(err) => reject(err));

} catch (err) {

reject(err);

}

});

}

/**

* 是否真機環境

* @return {boolean}

*/

isMobile(): boolean {

return this.platform.is('mobile') && !this.platform.is('mobileweb');

}

}

3. 調用

刪除app.html里的默認root屬性

圖片.png

在程序初始化的時候調用創建數據庫(即app.component.ts里)

constructor(

private statusBar: StatusBar,

private splashScreen: SplashScreen，

private nativeProvider: NativeProvider) {

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

// Okay, so the platform is ready and our plugins are available.

// Here you can do any higher level native things you might need.

this.init();//初始化

});

}

init(){

//確保異步執行完后才隱藏啟動動畫

this.events.subscribe('db:create', () => {

//創建數據庫與表成功后才關閉動畫跳轉頁面

this.statusBar.styleDefault();

this.splashScreen.hide();

this.nav.setRoot(TabsPage);

})

//初始化創建數據庫

this.nativeProvider.createDb();

}

在所需頁面引入調用即可

//插入數據

this.nativeProvider.executeSql('INSERT INTO remindMaster(user_id,state,content,remind_time,create_time) VALUES (?,?,?,?,?)',

['1', '0', 'haha', '2017-12-14', new Date().getTime().toString()]);

//查詢數據

//如果使用直接拼接sql查詢，需要注意參數加 ''，否則真機sqlite查看不到數據 例如：(`SELECT remind_id,state,user_id,content,remind_time,create_time FROM remindMaster WHERE state='0' AND user_id = '${user_id }' ORDER BY remind_time ASC`, []

this.nativeProvider.executeSql('SELECT remind_id,state,user_id,content,remind_time,create_time FROM remindMaster WHERE state=? AND user_id = ? ORDER BY remind_time ASC', ['0','1']).then(data => {

if (!!!!data && !!!!data.rows && data.rows.length > 0) {

for (let i = 0; i < data.rows.length; i++) {

console.log(data.rows.item(i));

}

}

});

4. 瀏覽器查看

image.png