浏览器端数据库indexedDB

以前写的web页面,select二级联动如下:

图片.png

逻辑是:省级select选择时,根据省份ID去请求后台接口,把获取到的城市选项遍历到市级select中.这样做每次省份改变,都要发送请求查询数据库.
发现浏览器上有个indexed.db可以用来存数据,而且支持索引查询.于是想着可以把全国所有城市一次性全传给浏览器,浏览器根据需要查询本地的数据,就不用频繁请求后台了.
indexedDB相当于mysql中的库database
objectStore相当于mysql中的表table

首先打开indexedDB

 //open('arg1'[,arg2]),参数1:名称,参数2:版本
 var res = window.indexedDB.open('area',1);
 console.log(res);

控制台输出结果:

图片.png

上述open方法会根据不同情况,触发不同事件
onerror:出错时触发
onsuccess:成功触发
onupgradeneeded:版本变化时触发

由于open方法尝试打开时,数据库版本不存在,会触发onupgradeneeded,所以把要做的事写在这里.

var res = window.indexedDB.open('area',1);
res.onupgradeneeded=function(e){
  //db就是我们创建的名为area的数据库
  var db = e.target.result;
  console.log('数据库版本更新');
  //创建一张表db.createObjectStore(arg1,agr2),
  //参数1,表的名字,参数2,表的主键
  var areaStore = db.createObjectStore('areaStore',{keyPath:'id'});
  //为表创建索引,createIndex(arg1,arg2,arg3)
  //参数1,索引名字.参数2,索引对应数据中的哪个字段
  //参数3,索引是否允许重复      
  areaStore.createIndex('id','id',{unique:true});
  areaStore.createIndex('parent','parent',{unique:false});
  areaStore.createIndex('level','level',{unique:false});

  
  areaStore.transaction.oncomplete = function() {
  //以读写方式打开表      
  var table = db.transaction('areaStore', 'readwrite').objectStore('areaStore');

  //一些测试数据
  var data = [
        {id:1,name:'北京',level:1,parent:0},
        {id:2,name:'天津',level:1,parent:0},
        {id:3,name:'河北',level:1,parent:0},
        {id:73,name:'石家庄市',level:2,parent:3},
        {id:74,name:'唐山市',level:2,parent:3},
        {id:75,name:'秦皇岛市',level:2,parent:3}
        ];
  //遍历数据,用add方法写入表里面去
  data.forEach(function(item){ table.add(item); });
}

结果如下:

图片.png

查询数据.

成功打开后,查询数据,应该写在onsuccess中

var db = e.target.result;
console.log('成功打开');
var table = db.transaction('areaStore').objectStore('areaStore');

//*****************主键查询********************
//get()方法,参数为主键的值,返回一条记录
table.get(2).onsuccess = function(e){
                console.log('主键查询');
                console.log(e.target.result);
                };

控制台输出

索引查询

//*****************索引查询*****************
//index('index_name').get('value')
//索引查询只会返回满足条件的第一条数据,如下level=1应该是3条数据,但实际只会返回第一条记录
table.index('level').get(1).onsuccess = function (e) {
            console.log('索引查询');
            console.log(e.target.result);
        };

控制台输出

游标+索引查询

//*******************游标+索引查询******************
//openCursor([arg1]),返回值是个游标对象
//参数相当于mysql中的where条件.
//可以不写参数,将会遍历所有数据,可以是一个范围,也可以是个固执值
table.index('level').openCursor(IDBKeyRange.only(2)).onsuccess = function(e){
            //游标对象
            var cursor = e.target.result;
            //每条记录都会返回对象
            if(cursor){
                console.log('游标加索引查询');
                console.log(cursor.value);
                //游标继续寻找,没有这句话,找到一条数据就会停止搜索
                cursor.continue();
            }else{
            //无匹配则cursor为null
            }
        }

控制台输入

游标 + 主键 范围查询

//游标 + 主键 范围查询
//upperBound(x,bool),表示'id'上限为'x',bool为true,不包括'x',为false,包括'x'
//lowerBound(x,bool),设置下限
table.index('id').openCursor(IDBKeyRange.upperBound(73,false)).onsuccess=function(e){
                var cursor = e.target.result;

                if(cursor){
                    console.log('游标加索引查询');
                    console.log(cursor.value);
                    cursor.continue();
                }else{
                    //
                }
        }

控制台输出