javascript 本地数据库存储websql

Posted 2020-10-04

　　最近我们的APP不太行了，因为是一个有做题，提交题目的功能，之前只是从APP提交错题到服务端，服务端难道答案，校验答案的对错，返回结果集，现在很多用户反映，提交速度很慢，很多时候，都提交不成功，所以领导让我把题目存在本地，校验题目的任务也交给前端来实现，服务端只接受并存储错误的题目，从而减轻服务端的压力，

　　在因为我们的题库量是很大的，而且种类比较多，每年两套题，一套题有100道左右的题目，所以单纯的localstorage并不能满足我们，因此我们选择了使用数据库，最开始，想试试sqllit，但是本身H5的标准里没有推荐，下面这个链接，可以看到dcloud提供的APP离线存储方案，可以选择

                     http://ask.dcloud.net.cn/article/166

　　最终我们使用的websql，再使用websql的时候，遇到了几个坑

　　1.数据库操作是异步的，有的时候很烦，例如我要获取一百道题目之后，对这些题目操作，返回值得方法，我没怎么用我使用的是回调函数传参的方法，感觉用起来一般，有的时候，太复杂的操作，经常会出问题，因为毕竟是函数，闭包你懂得。

　　2.数据库版本号的修改，这个情况确实恶心，我本来以为很简单就可以解决的小垃圾，卡了老子半个下午，最终配合localstorage才解决，神烦的一个机制

　　简单介绍一下：

　　数据库再每次打开的时候，都需要有一个版本号，如果在打开数据库的时候，传入的版本号，和数据本身的版本号不同，那么就会报错，而且报的错贼奇葩

　　　　　　

　　这是当我吧2.0版本的数据库，修改版本为1.0的时候报的错，解决方法：每次打开生成数据库的时候，都从localstorage里面取，当获取到的数据库版本号和本地不同的时候，我们需要，先打开一下数据库，获取到dataBase对象，然后，修改数据库版本，dataBase身上有原生的changeVersion方法，用来修改数据库的版本，然后同步到localstorage，下次数据库再打开的时候，直接从localstorage里面拿最新的；( ^ - ^ )

　　3.在插入数据的时候，不要跳转页面，由于是异步插入的，所以很容易出现插入到一把，跳页面了，结果就是，终止了循环，不插了，所以如果出现了跳转页面和插入数据在同一个函数里面的收，尽量放到跳转之后的页面里面去插入

　　下面贴上我在操作的时候，封装的Js文件( 其实我也是网上找的，自己根据需求修改了一下 )

　　websql.js

  1 /**
  2 *数据库操作辅助类,定义对象、数据操作方法都在这里定义
  3 */
  4 var dbname=‘yearstopic‘;/*数据库名*/
  5 var dbdesc = ‘历年真题题库‘; /*数据库描述*/
  6 var dbsize = 20*1024*1024; /*数据库大小*/
  7 var dataBase = null; /*暂存数据库对象*/
  8 /*数据库中的表单名*/
  9 var websqlTable = "websqlTable";
 10 /**
 11  * 打开数据库
 12  * @returns  dataBase:打开成功   null:打开失败
 13  */
 14 function websqlOpenDB(){
 15     /*数据库有就打开 没有就创建*/
 16    var version = window.localStorage.DBversion;
 17     dataBase = window.openDatabase(dbname, version, dbdesc, dbsize);
 18     if (dataBase) {
 19         console.log("数据库创建/打开成功!");
 20     } else{
 21         console.log("数据库创建/打开失败！");
 22     }
 23     return dataBase;
 24 }
 25 //修改数据库版本
 26 function changeDataBaseVersion(old_version,new_version){
 27     var db  = websqlOpenDB();
 28     db.changeVersion(old_version,new_version,null,function(err){},null)
 29     window.localStorage.DBversion = new_version;
 30 }
 31 /**
 32  * 新建数据库里面的表单
 33  * @param tableName:表单名
 34  */
 35 function websqlCreatTable(tableName){
 36 //  chinaAreaOpenDB();
 37     var creatTableSQL = ‘CREATE TABLE IF  NOT EXISTS ‘+ tableName+‘(ID text,QUESTION text)‘;
 38     dataBase.transaction(function (ctx,result) {
 39         ctx.executeSql(creatTableSQL,[],function(ctx,result){
 40             console.log("表创建成功 " + tableName);
 41         },function(tx, error){
 42             console.log(‘创建表失败:‘ + tableName + error.message);
 43         });
 44     });
 45 }
 46 //插入数据
 47 function websqlInsterDataToTable(tableName,id,question){
 48     var question = JSON.stringify(question);
 49     var insterTableSQL = ‘INSERT INTO ‘ + tableName + ‘ VALUES (?,?)‘;
 50     dataBase.transaction(function (ctx) {
 51         ctx.executeSql(insterTableSQL,[id,question],function (ctx,result){
 52             console.log("插入" + tableName + id + "成功");
 53         },
 54         function (tx, error) {
 55             console.log(‘插入失败: ‘ + error.message);
 56         });
 57     });
 58 }
 59 /**
 60  * 获取数据库一个表单里面的所有数据
 61  * @param tableName:表单名
 62  * 返回数据集合
 63  */
 64 function websqlGetAllData(tableName,fn){
 65     var selectALLSQL = ‘SELECT * FROM ‘ + tableName;
 66     dataBase.transaction(function (ctx) {
 67         ctx.executeSql(selectALLSQL,[],function (ctx,result){
 68             console.log(‘查询成功: ‘ + tableName +‘__‘+ result.rows.length);
 69             var len = result.rows.length;
 70             var queryDataArray = [];
 71             for(var i = 0;i < len;i++) {
 72                     queryDataArray.push(JSON.parse(result.rows.item(i).QUESTION));
 73             }
 74             fn(queryDataArray);
 75         },
 76         function (tx, error) {
 77             console.log(‘查询失败: ‘ + error.message);
 78         });
 79     });
 80 }
 81 //查询所有数据，获取json格式
 82 function websqlGetAllDataJson(tableName,fn){
 83     var selectALLSQL = ‘SELECT * FROM ‘ + tableName;
 84     dataBase.transaction(function (ctx) {
 85         ctx.executeSql(selectALLSQL,[],function (ctx,result){
 86             console.log(‘查询成功: ‘ + tableName +‘__‘+ result.rows.length);
 87             var len = result.rows.length;
 88             var queryDataArray = {};
 89             for(var i = 0;i < len;i++) {
 90                 var id = result.rows.item(i).ID;
 91                 id = id.replace(‘.0‘,‘‘);
 92                 queryDataArray[id] = JSON.parse(result.rows.item(i).QUESTION);
 93             }
 94             fn(queryDataArray);
 95         },
 96         function (tx, error) {
 97             console.log(‘查询失败: ‘ + error.message);
 98         });
 99     });
100 }
101 /**
102  * 获取数据库一个表单里面的部分数据
103  * @param tableName:表单名
104  * @param name:姓名
105  */
106 function websqlGetAData(tableName,id,fn){
107     var selectSQL = ‘SELECT * FROM ‘ + tableName + ‘ WHERE ID = ?‘
108     dataBase.transaction(function (ctx) {
109         ctx.executeSql(selectSQL,[id+‘.0‘],function (ctx,result){
110             fn && fn(JSON.parse(result.rows.item(0).QUESTION))
111         },
112         function (tx, error) {
113             console.log(‘查询失败: ‘ + error.message);
114         });
115     });
116 }
117 
118 function webSqlDeleteTable(tabName){
119     dataBase.transaction(function(tx) {
120         tx.executeSql(‘DROP TABLE ‘+tabName+‘‘);  
121         console.log(‘删除表‘+tabName+‘成功‘)
122     },
123     function(tx,err){
124         console.log(‘删除表‘+tabName+‘失败‘)
125     })
126 }
127 /**
128  * 删除表单里的全部数据
129  * @param tableName:表单名
130  */
131 function websqlDeleteAllDataFromTable(tableName){
132     var deleteTableSQL = ‘DELETE FROM ‘ + tableName;
133     localStorage.removeItem(tableName);
134     dataBase.transaction(function (ctx,result) {
135         ctx.executeSql(deleteTableSQL,[],function(ctx,result){
136             console.log("删除表成功 " + tableName);
137         },function(tx, error){ 
138             console.log(‘删除表失败:‘ + tableName + error.message);
139         });
140     });
141 }

　　就这么多吧，想起来了，再补充