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，一经查实，立即删除！

相关文章

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

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

一、 ioremap() 函数基础概念 几乎每一种外设都是通过读写设备上的寄存器来进行的&#xff0c;通常包括控制寄存器、状态寄存器和数据寄存器三大类&#xff0c;外设的寄存器通常被连续地编址。根据CPU体系结构的不同&#xff0c;CPU对IO端口的编址方式有两种&#xff1a; a -- …
阅读更多...
Linux 字符设备驱动开发基础（三）—— read()、write() 相关函数解析

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&…
阅读更多...
opengl 配置

opengl 配置

OpenGL(Open Graphics Library)是一个跨编程语言、跨平台的专业图形程序接口。 OpenGL是SGI公司开发的一套计算机图形处理系统&#xff0c;是图形硬件的软件接口&#xff0c;任何一个OpenGL应用程序无须考虑其运行环境所在平台与操作系统&#xff0c;在任何一个遵循OpenG…
阅读更多...
Linux 字符设备驱动开发基础（二）—— 编写简单 PWM 设备驱动

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性能优化

Tomcat7性能优化

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

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

Fast Image Cache 是一种在 iOS 应用程序中高效、持续、超快速的存储和检索图像的解决方案。任何良好的 iOS 应用程序的用户体验都应该是快速&#xff0c;平滑滚动的&#xff0c;Fast Image Cache 提供图像高速缓存有助于使这更容易实现。 对于图片丰富的应用程序&#xff0c;图…
阅读更多...
Linux 字符设备驱动开发基础（四）—— ioctl() 函数解析

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

解析完 open、close、read、write 四个函数后&#xff0c;终于到我们的 ioctl() 函数了 一、 什么是ioctl ioctl是设备驱动程序中对设备的I/O通道进行管理的函数。所谓对I/O通道进行管理&#xff0c;就是对设备的一些特性进行控制&#xff0c;例如串口的传输波特率、马达的转速…
阅读更多...
android自动化框架简要剖析（一）：运行原理+基本框架

android自动化框架简要剖析（一）：运行原理+基本框架

android自动化测试原理&#xff1a; 1、将测试apk和被测试apk&#xff0c;运行在一个进程中&#xff1b;通过instrumentation进行线程间的通信 2、通过android.test.AndroidTestCase及其子类&#xff0c;控制android系统对象 3、通过android.test.InstrumentationTestCase 及其…
阅读更多...
Linux 字符设备驱动开发基础（一）—— 编写简单 LED 设备驱动

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

现在&#xff0c;我们来编写自己第一个字符设备驱动 —— 点亮LED。&#xff08;不完善&#xff0c;后面再完善&#xff09; 硬件平台&#xff1a;Exynos4412&#xff08;FS4412&#xff09; 编写驱动分下面几步&#xff1a; a -- 查看原理图、数据手册&#xff0c;了解设备的操…
阅读更多...
Linux 字符设备驱动结构（四）—— file_operations 结构体知识解析

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

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

Android开发群

为什么80%的码农都做不了架构师&#xff1f;>>> 我的自建Android应用开发群&#xff0c;欢迎大家来聊聊呀&#xff01;201427584 转载于:https://my.oschina.net/catia/blog/176384
阅读更多...
Linux 字符设备驱动结构（三）—— file、inode结构体及chardevs数组等相关知识解析

Linux 字符设备驱动结构（三）—— file、inode结构体及chardevs数组等相关知识解析

前面我们学习了字符设备结构体cdev Linux 字符设备驱动开发 &#xff08;一&#xff09;—— 字符设备驱动结构&#xff08;上&#xff09; 下面继续学习字符设备另外几个重要的数据结构。 先看下面这张图&#xff0c;这是Linux 中虚拟文件系统、一般的设备文件与设备驱动程序…
阅读更多...
技术人生：三亚之行

技术人生：三亚之行

人生收获 此次是公司组团去的三亚&#xff0c;地接的导游非常热情&#xff0c;如同大多数人一样&#xff0c;导游也会在这短短的几天内&#xff0c;尽可能的表现自己&#xff0c;此文聊聊导游说的三句话。 旅游三不“较”&#xff1a; 不比较不计较不睡觉人生何尝不是如此&…
阅读更多...
Linux 字符设备驱动结构（二）—— 自动创建设备节点

Linux 字符设备驱动结构（二）—— 自动创建设备节点

上一篇我们介绍到创建设备文件的方法&#xff0c;利用cat /proc/devices查看申请到的设备名&#xff0c;设备号。 第一种是使用mknod手工创建&#xff1a;mknod filename type major minor 第二种是自动创建设备节点&#xff1a;利用udev&#xff08;mdev&#xff09;来实现设备…
阅读更多...
Linux 字符设备驱动结构（一）—— cdev 结构体、设备号相关知识解析

Linux 字符设备驱动结构（一）—— cdev 结构体、设备号相关知识解析

一、字符设备基础知识 1、设备驱动分类 linux系统将设备分为3类&#xff1a;字符设备、块设备、网络设备。使用驱动程序&#xff1a; 字符设备&#xff1a;是指只能一个字节一个字节读写的设备&#xff0c;不能随机读取设备内存中的某一数据&#xff0c;读取数据需要按照先后数…
阅读更多...
Linux 驱动开发之内核模块开发（四）—— 符号表的导出

Linux 驱动开发之内核模块开发（四）—— 符号表的导出

Linux内核头文件提供了一个方便的方法用来管理符号的对模块外部的可见性,因此减少了命名空间的污染(命名空间的名称可能会与内核其他地方定义的名称冲突),并且适当信息隐藏。 如果你的模块需要输出符号给其他模块使用,应当使用下面的宏定义: EXPORT_SYMBOL(name); EXPORT_SYMBO…
阅读更多...
Linux 驱动开发之内核模块开发 （三）—— 模块传参

Linux 驱动开发之内核模块开发 （三）—— 模块传参

一、module_param() 定义 通常在用户态下编程&#xff0c;即应用程序&#xff0c;可以通过main()的来传递命令行参数&#xff0c;而编写一个内核模块&#xff0c;则通过module_param() 来传参。 module_param()宏是Linux 2.6内核中新增的&#xff0c;该宏被定义在include/linux…
阅读更多...
Exynos4412 文件系统制作（二）—— 文件系统简介

Exynos4412 文件系统制作（二）—— 文件系统简介

一、Linux磁盘分区和目录 Linux发行版本之间的差别很少&#xff0c;差别主要表现在系统管理的特色工具以及软件包管理方式的不同。目录结构基本上都是一样的。 Windows的文件结构是多个并列的树状结构&#xff0c;最顶部的是不同的磁盘&#xff08;分区&#xff09;&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023