在HTML5本地存储——IndexedDB（一：基本使用）中介绍了关于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();

                }

            }

        }

完整示例

 <!DOCTYPE HTML>

 <html>

 <head>

     <title>IndexedDB</title>

 </head>

 <body>

     <script type="text/javascript">

         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);

             };

         }

         function closeDB(db){

             db.close();

         }

         function deleteDB(name){

             indexedDB.deleteDatabase(name);

         }

         function addData(db,storeName){

             var transaction=db.transaction(storeName,'readwrite');

             var store=transaction.objectStore(storeName); 

             for(var i=0;i<students.length;i++){

                 store.add(students[i]);

             }

         }

         function getDataByKey(db,storeName,value){

             var transaction=db.transaction(storeName,'readwrite');

             var store=transaction.objectStore(storeName);

             var request=store.get(value);

             request.onsuccess=function(e){

                 var student=e.target.result;

                 console.log(student.name);

             };

         }

         function updateDataByKey(db,storeName,value){

             var transaction=db.transaction(storeName,'readwrite');

             var store=transaction.objectStore(storeName);

             var request=store.get(value);

             request.onsuccess=function(e){

                 var student=e.target.result;

                 student.age=35;

                 store.put(student);

             };

         }

         function deleteDataByKey(db,storeName,value){

             var transaction=db.transaction(storeName,'readwrite');

             var store=transaction.objectStore(storeName);

             store.delete(value);

         }

         function clearObjectStore(db,storeName){

             var transaction=db.transaction(storeName,'readwrite');

             var store=transaction.objectStore(storeName);

             store.clear();

         }

         function deleteObjectStore(db,storeName){

             var transaction=db.transaction(storeName,'versionchange');

             db.deleteObjectStore(storeName);

         }

         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();

                 }

             };

         }

         function getDataByIndex(db,storeName){

             var transaction=db.transaction(storeName);

             var store=transaction.objectStore(storeName);

             var index = store.index("ageIndex");

             index.get(26).onsuccess=function(e){

                 var student=e.target.result;

                 console.log(student.id);

             }

         }

         function getMultipleData(db,storeName){

             var transaction=db.transaction(storeName);

             var store=transaction.objectStore(storeName);

             var index = store.index("nameIndex");

             var request=index.openCursor(null,IDBCursor.prev);

             request.onsuccess=function(e){

                 var cursor=e.target.result;

                 if(cursor){

                     var student=cursor.value;

                     console.log(student.name);

                     cursor.continue();

                 }

             }

         }

         var myDB={

             name:'test',

             version:1,

             db:null

         };

         var students=[{

             id:1001,

             name:"Byron",

             age:24

         },{

             id:1002,

             name:"Frank",

             age:30

         },{

             id:1003,

             name:"Aaron",

             age:26

         },{

             id:1004,

             name:"Casper",

             age:26

         }];

     </script>

 </body>

 </html>

最后

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

HTML5本地存储——IndexedDB（二：索引）的更多相关文章

  1. HTML5本地存储——IndexedDB二：索引

    HTML5本地存储——IndexedDB(二:索引)   在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexed ...

  2. HTML5本地存储——IndexedDB

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  3. HTML5本地存储——IndexedDB（一：基本使用）

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  4. html5本地存储（二）--- SQLList

    html5内置了2种本地数据库,一是被称为“SQLLite”,可以通过SQL语言来访问文件型SQL数据库.二是被称为“indexedDB” 的NoSQL类型的数据库 这篇主要讲SQLLite 在js中 ...

  5. HTML5本地存储——Web SQL Database与indexedDB

    虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...

  6. HTML5 ——本地存储

    目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...

  7. HTML5本地存储localStorage与sessionStorage

    在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...

  8. HTML5本地存储localStorage与sessionStorage详解

    前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...

  9. HTML5本地存储(Local Storage) 的前世今生

    长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...

随机推荐

  1. Mac下U盘安装系统“未验证的错误”

    bash下 输入下面命令: date 1220141012015.30

  2. js模块和级联

    1.模块 模块模式的一般形式是:一个定义了私有变量和函数的函数,利用闭包创建可以访问私有变量和函数的特权函数,最后返回这个特权函数,或者把它们保存到一个可访问的地方.使用模块模式就可以摒弃全局变量的使 ...

  3. SAAS在中国市场的发展前景

    发展现状 2008年1-7月软件行业实现收入4199.1亿元,同比增长32.4%.2008年第一季度,业务管理软件市场总量达16.31亿元,同比增长17.8%.面对成本的上升,企业选择了向信息化要效率 ...

  4. 深入研究C语言 第二篇(续)

    1. 关于如下的程序,关于结构体的拷贝,拷贝是拷贝到内存中的什么地方? 我们进入debug进行反汇编,单步等操作跟踪查看.发现: 在main中,我们看到call 0266应该对应的是转跳到func处执 ...

  5. 工程BUG记录

    前天项目中,有个 id 对象,命名成了 initA...  从该页面点击进入其他时没有问题,但是在返回到该页面后,程序崩溃了,报了野指针,后来在跳转传值的时候,发现这个异常.我猜测原因可能是 xcod ...

  6. 用Java导出为excel表格

    导出的是最基础的excel表格,没有任何样式. <input type="button" value="输出到Excel" onclick='output ...

  7. MongoDB学习笔记—03 增删改查操作

    MongoDB的CURD操作分别通过函数insert().update().find().remove()进行 MongoDB文档新增与删除 MongoDB中关于文档的新增与删除比较简单.主要通过in ...

  8. 查询Oracle锁表和解决方法

    Oracle数据库操作中,我们有时会用到锁表查询以及解锁和kill进程等操作,那么这些操作是怎么实现的呢?本文我们主要就介绍一下这部分内容.(1)锁表查询的代码有以下的形式:select count( ...

  9. 教你如何快速下载旧版本的Firefox浏览器

    http://blog.csdn.net/gh0st007/article/details/18937421 更新后的ff使用过程中经常出现卡顿的现象,之前并没有出现,于是想找老版本的ff安装一下.发 ...

  10. Android--多媒体操作

    ---恢复内容开始--- 1.拍照,这里直接上代码,看注释就好 public void onCreate(Bundle savedInstanceState) { super.onCreate(sav ...