ionic sqlite 存取数据封装(兼容真机与webkit浏览器)

不管是真机还是H5,都有提供sqlite数据库进行存储数据。那么我们只要封装好函数就能随意调用了。

如果只是存储简单的键值对形式的话,ionic官网也提供了一个兼容网页的storage,https://ionicframework.com/docs/storage,但只能key/value ,当然value可以是Json。
但是很多时候为了前后端数据保存一致,所以前端也采用多字段存储,那么只能自己封装函数处理了。

*如果websql支持的浏览器无法满足自己的需求,请使用IndexedDB

IndexedDB 使用

1. 安装数据库操作插件

官网地址: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. 封装调用函数

控制台输入命令创建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<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数据库
     */
    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);
            }
        });
    }

    /**
      * 是否真机环境
      * @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

如遇问题可以直接简书私信或访问 网站建设公司 https://www.qijianwang.net

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,810评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,633评论 18 139
  • 音频 AudioBus:下一代 App 到 App 的实时音频路由。官网 AudioKit:一个强大的音频合成,处...
    voQuan阅读 5,048评论 5 63
  • 解答思路 我一直提倡的是 学以致用,知行合一,所以当我们学习和储备技能的时候应该要和市场相结合,准确的说应该是人才...
    初学IT阅读 208评论 0 0
  • 镇子上木门民国味十足,千年前的画面突然浮现眼前,瞬间消失不见。 对古镇情有独钟,不过是守着那个执念,偏执地爱着梦里...
    大天使早就死掉了阅读 229评论 0 1