不管是真機還是H5，都有提供sqlite數(shù)據(jù)庫進行存儲數(shù)據(jù)。那么我們只要封裝好函數(shù)就能隨意調(diào)用了。
如果只是存儲簡單的鍵值對形式的話，ionic官網(wǎng)也提供了一個兼容網(wǎng)頁的storage，https://ionicframework.com/docs/storage，但只能key/value ，當然value可以是Json。
但是很多時候為了前后端數(shù)據(jù)保存一致，所以前端也采用多字段存儲，那么只能自己封裝函數(shù)處理了。
*如果websql支持的瀏覽器無法滿足自己的需求，請使用IndexedDB
1. 安裝數(shù)據(jù)庫操作插件
官網(wǎng)地址：https://ionicframework.com/docs/native/sqlite/
$ 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. 封裝調(diào)用函數(shù)
控制臺輸入命令創(chuàng)建provider
$ ionic g provider native
執(zhí)行后目錄如下：
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數(shù)據(jù)庫對象
win: any = window;//window對象
constructor( private platform: Platform,
private sqlite: SQLite，
private events: Events,
private storage: StorageServiceProvider) { }
/**
* 創(chuàng)建數(shù)據(jù)庫
*/
createDb() {
if (this.isMobile()) {
this.sqlite.create({
name: 'data.db',
location: 'default'
})
.then((db: SQLiteObject) => {
this.database = db;
//創(chuàng)建表如果已存在就創(chuàng)建
if (this.storage.read('db:create') != "Yes") {
//創(chuàng)建表
this.createTable();
} else {
this.events.publish('db:create');
}
})
.catch(e => {
this.showAlert(this.text.CREATE_DB);
this.events.publish('db:create');
});
} else {
//H5數(shù)據(jù)庫存儲，注意測試瀏覽器兼容，websql w3c沒維護
try {
this.win_db = this.win.openDatabase("data.db", '1.0', 'database', 5 * 1024 * 1024);//聲明H5 數(shù)據(jù)庫大小
this.createTable();
} catch (err) {
console.log('創(chuàng)建數(shù)據(jù)庫失敗')
}
}
}
/**
* 創(chuàng)建表
*/
async createTable() {
// this.querySql('', []);
//可能存在多個執(zhí)行創(chuàng)建表語句，只需最后一個使用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");
}
/**
* 執(zhí)行語句
*/
executeSql(sql: string, array: Array<string>): Promise<any> {
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數(shù)據(jù)庫
*/
execWebSql(sql: string, params: Array<string>): Promise<any> {
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);
}
});
}
/**
* 是否真機環(huán)境
* @return {boolean}
*/
isMobile(): boolean {
return this.platform.is('mobile') && !this.platform.is('mobileweb');
}
}
3. 調(diào)用
刪除app.html里的默認root屬性
圖片.png
在程序初始化的時候調(diào)用創(chuàng)建數(shù)據(jù)庫（即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(){
//確保異步執(zhí)行完后才隱藏啟動動畫
this.events.subscribe('db:create', () => {
//創(chuàng)建數(shù)據(jù)庫與表成功后才關閉動畫跳轉(zhuǎn)頁面
this.statusBar.styleDefault();
this.splashScreen.hide();
this.nav.setRoot(TabsPage);
})
//初始化創(chuàng)建數(shù)據(jù)庫
this.nativeProvider.createDb();
}
在所需頁面引入調(diào)用即可
//插入數(shù)據(jù)
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()]);
//查詢數(shù)據(jù)
//如果使用直接拼接sql查詢，需要注意參數(shù)加 ''，否則真機sqlite查看不到數(shù)據(jù) 例如：(`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
如遇問題可以直接簡書私信或訪問 網(wǎng)站建設公司 https://www.qijianwang.net
