博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5本地存储——IndexedDB(二:索引)
阅读量:6922 次
发布时间:2019-06-27

本文共 4065 字,大约阅读时间需要 13 分钟。

在中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引。

熟悉数据库的同学都知道索引的一个好处就是可以迅速定位数据,提高搜索速度,在indexedDB中有两种索引,一种是自增长的int值,一种是keyPath:自己指定索引列,我们重点来看看keyPath方式的索引使用.

创建索引

我们可以在创建object store的时候指明索引,使用object store的createIndex创建索引,方法有三个参数

  • 索引名称
  • 索引属性字段名
  • 索引属性值是否唯一
function openDB (name,version) {            var version=version || 1;            var request=window.indexedDB.open(name,version);            request.onerror=function(e){                console.log(e.currentTarget.error.message);            };            request.onsuccess=function(e){                myDB.db=e.target.result;            };            request.onupgradeneeded=function(e){                var db=e.target.result;                if(!db.objectStoreNames.contains('students')){                    var store=db.createObjectStore('students',{keyPath: 'id'});                    store.createIndex('nameIndex','name',{unique:true});                     store.createIndex('ageIndex','age',{unique:false});                 }                console.log('DB version changed to '+version);            };        }

这样我们在students 上创建了两个索引

 

利用索引获取数据

function getDataByIndex(db,storeName){            var transaction=db.transaction(storeName);            var store=transaction.objectStore(storeName);            var index = store.index("nameIndex");            index.get('Byron').onsuccess=function(e){                var student=e.target.result;                console.log(student.id);            }        }

这样我们可以利用索引快速获取数据,name的索引是唯一的没问题,但是对于age索引只会取到第一个匹配值,要想得到所有age符合条件的值就需要使用游标了

游标

在indexedDB中使用索引和游标是分不开的,对数据库熟悉的同学很好理解游标是什么东东,有了数据库object store的游标,我们就可以利用游标遍历object store了。

使用object store的openCursor()方法打开游标

function fetchStoreByCursor(db,storeName){            var transaction=db.transaction(storeName);            var store=transaction.objectStore(storeName);            var request=store.openCursor();            request.onsuccess=function(e){                var cursor=e.target.result;                if(cursor){                    console.log(cursor.key);                    var currentStudent=cursor.value;                    console.log(currentStudent.name);                    cursor.continue();                }            };        }

curson.contine()会使游标下移,知道没有数据返回undefined

index与游标结合

 

要想获取age为26的student,可以结合游标使用索引

function getMultipleData(db,storeName){            var transaction=db.transaction(storeName);            var store=transaction.objectStore(storeName);            var index = store.index("ageIndex");            var request=index.openCursor(IDBKeyRange.only(26))            request.onsuccess=function(e){                var cursor=e.target.result;                if(cursor){                    var student=cursor.value;                    console.log(student.id);                    cursor.continue();                }            }        }

这样我们可是使用索引打开一个游标,参数下面会讲到,在成功的句柄内获得游标便利age为26的student,也可以通过index.openKeyCursor()方法只获取每个对象的key值。

指定游标范围

index.openCursor()/index.openKeyCursor()方法在不传递参数的时候会获取object store所有记录,像上面例子一样我们可以对搜索进行筛选
可以使用key range 限制游标中值的范围,把它作为第一个参数传给 openCursor() 或是 openKeyCursor()
IDBKeyRange.only(value):只获取指定数据
IDBKeyRange.lowerBound(value,isOpen):获取最小是value的数据,第二个参数用来指示是否排除value值本身,也就是数学中的是否是开区间
IDBKeyRange.upperBound(value,isOpen):和上面类似,用于获取最大值是value的数据
IDBKeyRange.bound(value1,value2,isOpen1,isOpen2):不用解释了吧

 

获取名字首字母在B-E的student

function getMultipleData(db,storeName){            var transaction=db.transaction(storeName);            var store=transaction.objectStore(storeName);            var index = store.index("nameIndex");            var request=index.openCursor(IDBKeyRange.bound('B','F',false,
true
));            request.onsuccess=function(e){                var cursor=e.target.result;                if(cursor){                    var student=cursor.value;                    console.log(student.name);                    cursor.continue();                }            }        }

 完整示例

 

1   2   3   4     IndexedDB  5   6   7     147 148 
View Code

 

 

最后

有了游标和索引才能真正发挥indexedDB为例,是不是感觉比自定义对象强大方便了很多呢。

转载于:https://www.cnblogs.com/dolphinX/p/3416889.html

你可能感兴趣的文章
一个简单的串口程序
查看>>
rsync: failed to connect to 192.168.2.9: Connection refused
查看>>
操作系统无人值守自动安装之Windows XP
查看>>
Nginx 忽略URL大小写配置
查看>>
jenkins自动发布java代码
查看>>
如何查看已安装的CentOS版本信息
查看>>
网页背景设置
查看>>
[杭电ACM]1720A+B Coming
查看>>
年底献给IT技术人的"大片"
查看>>
Spring4-@Required
查看>>
字符串ucwords解析
查看>>
Windows2003 sp2 R2 的序列号及15种版本
查看>>
我的友情链接
查看>>
用C#实现对MSSqlServer数据库的增删改查---DAL层
查看>>
windows azure虚拟机里面安装FTP服务器(serv-u)之azure设置
查看>>
MSSQL内网***笔记
查看>>
mongodb仲裁节点
查看>>
Centos 7 更换yum源
查看>>
python冒泡算法
查看>>
我的友情链接
查看>>