HTML5本地存储——IndexedDB(二:索引)

在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 上创建了两个索引

image

 

image

利用索引获取数据

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 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4     <title>IndexedDB</title>
  5 </head>
  6 <body>
  7     <script type="text/javascript">
  8         function openDB (name,version) {
  9             var version=version || 1;
 10             var request=window.indexedDB.open(name,version);
 11             request.onerror=function(e){
 12                 console.log(e.currentTarget.error.message);
 13             };
 14             request.onsuccess=function(e){
 15                 myDB.db=e.target.result;
 16             };
 17             request.onupgradeneeded=function(e){
 18                 var db=e.target.result;
 19                 if(!db.objectStoreNames.contains('students')){
 20                     var store=db.createObjectStore('students',{keyPath: 'id'});
 21                     store.createIndex('nameIndex','name',{unique:true}); 
 22                     store.createIndex('ageIndex','age',{unique:false}); 
 23                 }
 24                 console.log('DB version changed to '+version);
 25             };
 26         }
 27 
 28         function closeDB(db){
 29             db.close();
 30         }
 31 
 32         function deleteDB(name){
 33             indexedDB.deleteDatabase(name);
 34         }
 35 
 36         function addData(db,storeName){
 37             var transaction=db.transaction(storeName,'readwrite'); 
 38             var store=transaction.objectStore(storeName); 
 39 
 40             for(var i=0;i<students.length;i++){
 41                 store.add(students[i]);
 42             }
 43         }
 44 
 45         function getDataByKey(db,storeName,value){
 46             var transaction=db.transaction(storeName,'readwrite'); 
 47             var store=transaction.objectStore(storeName); 
 48             var request=store.get(value); 
 49             request.onsuccess=function(e){ 
 50                 var student=e.target.result; 
 51                 console.log(student.name); 
 52             };
 53         }
 54 
 55         function updateDataByKey(db,storeName,value){
 56             var transaction=db.transaction(storeName,'readwrite'); 
 57             var store=transaction.objectStore(storeName); 
 58             var request=store.get(value); 
 59             request.onsuccess=function(e){ 
 60                 var student=e.target.result; 
 61                 student.age=35;
 62                 store.put(student); 
 63             };
 64         }
 65 
 66         function deleteDataByKey(db,storeName,value){
 67             var transaction=db.transaction(storeName,'readwrite'); 
 68             var store=transaction.objectStore(storeName); 
 69             store.delete(value); 
 70         }
 71 
 72         function clearObjectStore(db,storeName){
 73             var transaction=db.transaction(storeName,'readwrite'); 
 74             var store=transaction.objectStore(storeName); 
 75             store.clear();
 76         }
 77 
 78         function deleteObjectStore(db,storeName){
 79             var transaction=db.transaction(storeName,'versionchange'); 
 80             db.deleteObjectStore(storeName);
 81         }
 82 
 83         function fetchStoreByCursor(db,storeName){
 84             var transaction=db.transaction(storeName);
 85             var store=transaction.objectStore(storeName);
 86             var request=store.openCursor();
 87             request.onsuccess=function(e){
 88                 var cursor=e.target.result;
 89                 if(cursor){
 90                     console.log(cursor.key);
 91                     var currentStudent=cursor.value;
 92                     console.log(currentStudent.name);
 93                     cursor.continue();
 94                 }
 95             };
 96         }
 97 
 98         function getDataByIndex(db,storeName){
 99             var transaction=db.transaction(storeName);
100             var store=transaction.objectStore(storeName);
101             var index = store.index("ageIndex");
102             index.get(26).onsuccess=function(e){
103                 var student=e.target.result;
104                 console.log(student.id);
105             }
106         }
107 
108         function getMultipleData(db,storeName){
109             var transaction=db.transaction(storeName);
110             var store=transaction.objectStore(storeName);
111             var index = store.index("nameIndex");
112             var request=index.openCursor(null,IDBCursor.prev);
113             request.onsuccess=function(e){
114                 var cursor=e.target.result;
115                 if(cursor){
116                     var student=cursor.value;
117                     console.log(student.name);
118                     cursor.continue();
119                 }
120             }
121         }
122 
123         var myDB={
124             name:'test',
125             version:1,
126             db:null
127         };
128 
129         var students=[{ 
130             id:1001, 
131             name:"Byron", 
132             age:24 
133         },{ 
134             id:1002, 
135             name:"Frank", 
136             age:30 
137         },{ 
138             id:1003, 
139             name:"Aaron", 
140             age:26 
141         },{ 
142             id:1004, 
143             name:"Casper", 
144             age:26 
145         }]; 
146     </script>
147 </body>
148 </html>
View Code

 

 

最后

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402147.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu在线体验

http://tour.ubuntu.com/zh-CN/转载于:https://www.cnblogs.com/nongbin/p/6412115.html

Linux 字符设备驱动开发基础(五)—— ioremap() 函数解析

一、 ioremap() 函数基础概念 几乎每一种外设都是通过读写设备上的寄存器来进行的&#xff0c;通常包括控制寄存器、状态寄存器和数据寄存器三大类&#xff0c;外设的寄存器通常被连续地编址。根据CPU体系结构的不同&#xff0c;CPU对IO端口的编址方式有两种&#xff1a; a -- …

df

linux中df命令参数功能&#xff1a;检查文件系统的磁盘空间占用情况。可以利用该命令来获取硬盘被占用了多少空间&#xff0c;目前还剩下多少空间等信息。 语法&#xff1a;df [选项] 说明&#xff1a;linux中df命令可显示所有文件系统对i节点和磁盘块的使用情况。 该命令各个选…

git是一种分布式代码管理工具,git通过树的形式记录文件的更改历史,比如: base'--base--A--A' ^ | --- B--B' 小米工程师常常需要寻找两个分支最近的分割点,即b...

// ConsoleApplication10.cpp : 定义控制台应用程序的入口点。 // #include "stdafx.h" #include <iostream> #include <vector> using namespace std;class Solution { public:/*** 返回git树上两点的最近分割点** param matrix 接邻矩阵&#xff0c;表…

Linux 字符设备驱动开发基础(三)—— read()、write() 相关函数解析

我们在前面讲到了file_operations&#xff0c;其是一个函数指针的集合&#xff0c;用于存放我们定义的用于操作设备的函数的指针&#xff0c;如果我们不定义&#xff0c;它默认保留为NULL。其中有最重要的几个函数&#xff0c;分别是open()、read()、write()、ioctl()&#xff…

机电传动控制第一周学习笔记

机电传动控制第一周学习笔记&#xff1a; 1 这一周主要讲述了概论和机电传动控制系统动力学基础两个章节内容。 2 绪论中说明了《机电传动控制》课程主要内容为下图所示&#xff1a; 3机电传动控制系统动力学基础章节主要内容分为&#xff1a; &#xff08;1&#xff09;a&…

Python中的元类及元类实现的单例模式

https://www.cnblogs.com/tkqasn/p/6524879.html 在看一些框架源代码的过程中碰到很多元类的实例&#xff0c;看起来很吃力很晦涩&#xff1b;在看python cookbook中关于元类创建单例模式的那一节有些疑惑。因此花了几天时间研究下元类这个概念。通过学习元类&#xff0c;我对p…

opengl 配置

OpenGL(Open Graphics Library)是一个跨编程语言、跨平台的专业图形程序接口。 OpenGL是SGI公司开发的一套计算机图形处理系统&#xff0c;是图形硬件的软件接口&#xff0c;任何一个OpenGL应用程序无须考虑其运行环境所在平台与操作系统&#xff0c;在任何一个遵循OpenG…

Linux 字符设备驱动开发基础(二)—— 编写简单 PWM 设备驱动

编写驱动的第一步仍是看原理图&#xff1a; 可以看到&#xff0c;该蜂鸣器由 GPD0_0 来控制 &#xff0c;查手册可知该I/O口由Time0 来控制&#xff0c;找到相应的寄存器&#xff1a; a -- I/O口寄存器及地址 GPD0CON 0x114000a0 b -- Time0 寄存器及地址 基地址为&#xff1a…

专访:混合云的发展趋势

近日&#xff0c;业界享有盛誉的vForum2013大会在京召开&#xff0c;此次大会云集了近百家国内外知名的云计算、数据存储、大数据及信息安全厂商&#xff0c;共同讨论了虚拟化、云计算及未来IT模式的发展趋势。笔者也有幸在大会期间采访到了VMware 大中华区技术总监张振伦先生&…

Tomcat7性能优化

用了很久的Tomcat&#xff0c;没怎么看过它的优化&#xff0c;今天抽出时间研究了下&#xff0c;将内容记录下。 首先&#xff0c;是客户端访问tomcat的一个过程&#xff0c;如图所示&#xff1a; 图中间虚线框部分是 Apache基金下的服务器来做静态资源处理的&#xff0c;而这部…

Python解析式

《python的各种推导式&#xff08;列表推导式、字典推导式、集合推导式&#xff09;》 推导式comprehensions&#xff08;又称解析式&#xff09;&#xff0c;是Python的一种独有特性。推导式是可以从一个数据序列构建另一个新的数据序列的结构体。 共有三种推导&#xff0c;在…

Fast Image Cache – iOS 应用程序高性能图片缓存

Fast Image Cache 是一种在 iOS 应用程序中高效、持续、超快速的存储和检索图像的解决方案。任何良好的 iOS 应用程序的用户体验都应该是快速&#xff0c;平滑滚动的&#xff0c;Fast Image Cache 提供图像高速缓存有助于使这更容易实现。 对于图片丰富的应用程序&#xff0c;图…

Linux 字符设备驱动开发基础(四)—— ioctl() 函数解析

解析完 open、close、read、write 四个函数后&#xff0c;终于到我们的 ioctl() 函数了 一、 什么是ioctl ioctl是设备驱动程序中对设备的I/O通道进行管理的函数。所谓对I/O通道进行管理&#xff0c;就是对设备的一些特性进行控制&#xff0c;例如串口的传输波特率、马达的转速…

Python中xrange和range异同

https://www.cnblogs.com/zhuzhubaoya/p/6381045.html

android自动化框架简要剖析(一):运行原理+基本框架

android自动化测试原理&#xff1a; 1、将测试apk和被测试apk&#xff0c;运行在一个进程中&#xff1b;通过instrumentation进行线程间的通信 2、通过android.test.AndroidTestCase及其子类&#xff0c;控制android系统对象 3、通过android.test.InstrumentationTestCase 及其…

Python的threading多线程

https://www.cnblogs.com/tkqasn/p/5700281.html threading — 基于线程的并行 threading用于提供线程相关的操作&#xff0c;线程是应用程序中工作的最小单元。python当前版本的多线程库没有实现优先级、线程组&#xff0c;线程也不能被停止、暂停、恢复、中断。 threading模…

Linux 字符设备驱动开发基础(一)—— 编写简单 LED 设备驱动

现在&#xff0c;我们来编写自己第一个字符设备驱动 —— 点亮LED。&#xff08;不完善&#xff0c;后面再完善&#xff09; 硬件平台&#xff1a;Exynos4412&#xff08;FS4412&#xff09; 编写驱动分下面几步&#xff1a; a -- 查看原理图、数据手册&#xff0c;了解设备的操…

angularJS+requireJS实现controller及directive的按需加载

最近因为项目的比较大&#xff0c;需要加载的js文件较多&#xff0c;为了提高首屏页面的加载速度&#xff0c;需要对js文件进行按需加载&#xff0c;然后网上参考了一些资料&#xff0c;自己也深入研究一番之后&#xff0c;实现了按需加载控制器js文件及指令js文件的效果&#…

Linux 字符设备驱动结构(四)—— file_operations 结构体知识解析

前面在 Linux 字符设备驱动开发基础 &#xff08;三&#xff09;—— 字符设备驱动结构&#xff08;中&#xff09; &#xff0c;我们已经介绍了两种重要的数据结构 struct inode{...}与 struct file{...} &#xff0c;下面来介绍另一个比较重要数据结构 struct _file_operatio…