在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. CSS3动画效果结合JS的轮播

    <style> *{;} #big{ width: 100%; height: 280px; } .carousel-wrapper{ width: 500px; height: 280p ...

  2. 1074. Reversing Linked List (25)

    模拟题,注意当k == 1 与 k == n时情况 #include <stdio.h> #include <string.h> #include <iostream&g ...

  3. .net/C# HttpWebRequest传送与接收参数

    public string PostData(string url, string data)//url:要发送到网站的地址 data:传送需要的参数 { HttpWebRequest myReque ...

  4. 把页面上的图表导出为pdf文件，分享一种请求下载文件的方法

    最近客户提出一个需求,就是把页面上的图表导出为pdf文件. 找了很多资料.终于有了点头绪.最主要是参考了HighCharts的做法.http://www.hcharts.cn/ 实现原理:把页面图表的 ...

  5. First class ,6 examples anlaysisi

    http://www.fgm.cc/learn/ First class ,6 examples anlaysisi <!DOCTYPE html> <!-- To change t ...

  6. [PL/SQL] 如何规避异常ORA-01403

    如果mytable表中不存在 ID = 123 的数据,那么 SELECT Flag INTO flag FROM mytable WHERE ID = 123 将抛出异常ORA-01403 SELE ...

  7. K/3 Cloud开发之旅－－环境准备篇

    K/3 Cloud是金蝶软件新推出的一款产品,介绍我就不多说了,谁用谁知道啊,那么我们如果要基于它做开发需要什么环境呢 开发环境必备软件 1 操作系统Windows X86/X64 或者Windows ...

  8. svn 在linux 下的一些常用命令

    最近在Linux系统下玩一些svn的东西,感觉脑袋很乱, 于是整理了一下一些初学者必须弄明白的基本命令: 1. svn --version: 查看Linux系统下的svn client版本. Clie ...

  9. MySQL 分区表

    转载自MySQL 分区表 今天统计数据的时候发现一张表使用了表分区,借此机会记录一下. 1. 什么是表分区? 表分区,是指根据一定规则,将数据库中的一张表分解成多个更小的,容易管理的部分.从逻辑上看, ...

  10. Codeforces #380 div2 E(729E) Subordinates

    E. Subordinates time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...