当前位置: 首页 > Web前端 > HTML5

IndexedDB索引数据库

时间:2023-04-05 20:17:33 HTML5

作者:新野时间:2018-04-3015:36IndexedDB使用对象来存储数据,与日常生活中使用的关系型数据库的操作大不相同。让我们从简单的使用中慢慢学习吧。第一步:打开数据库,关闭数据库,删除数据库。var数据库,indexedDB=window.indexedDB||窗口.mozIndexedDB||窗口.webkitIndexedDB||window.msIndexedDB;varrequest=indexedDB.open("databaseName",1);//注册下面的回调方法request.onerror=function(e){console.log(e.target.errorCode);};request.onsuccess=function(e){数据库=e.target.result;console.log('创建或打开数据库成功');};request.onupgradeneeded=function(e){database=e.target.result;};最终返回的request是一个IDBOpenDBRequest对象,可以通过在其中注册需要的回调方法来提示错误或者获取数据库连接对象。需要注意的是,onsuccess和onupgradeneeded的区别在于前者是成功回调,后者是在打开的数据库不是我们期望的最新版本时触发。简单来说,触发只有两种:1、数据库不存在。一旦成立;2.当indexedDB.open的第二个参数高于当前数据库版本号时。对于indexedDB.open的第二个参数,请始终使用整数而不是小数,因为它可能会导致问题。其次,onupgradeneeded是我们唯一可以修改数据库结构(对象存储空间结构)的地方。还有两个对数据库的操作:1.删除数据库:indexedDB.deleteDatabase("databaseName");2.关闭数据库:database.close();第二步:对象存储空间(类似于表)。对象存储空间相当于关系数据库中的表。为了使用它,我们需要按如下方式定义它:request.onupgradeneeded=function(e){database=e.target.result;//创建对象存储空间,以用户名为主键varstore=database.createObjectStore("students",{keyPath:"username"});//另一种设置主键的方法//varstore=database.createObjectStore("students",{autoIncrement:true});};第三步:交易。创建对象存储空间后,数据库中的增、删、改、查都是通过事务transaction来完成的,调用数据库对象的transaction()方法就可以创建事务对象。上面的第二步是设置对象存储空间。我们会发现最终返回了这个对象。通过这个对象,我们可以存储这个“表”。如果我们后面不创建,如果我们要修改对象的存储空间采集数据的时候如何获取这个对象,如下所示:vartransaction=database.transaction(["students"],'readwrite');varstore=transaction.objectStore("students");传入transaction()的第一个参数表示事务准备管理的对象存储空间。上面用的是数组,可以用的很多。将使用下面第二行中使用的任何一个。如果和这里一样,只有一个,或者直接传一个字符串即可;transaction()传入的第二个参数是操作空间的方式。默认是readonly只读操作,传入的代码是readwrite读写操作。第二步和第三步的例子中返回的store实际上是一个对象存储空间,操作'table'的方法由它提供。第四步:操作对象存储空间。add方法用于添加数据(调用时保证主键与需要更新的主键相同),示例如下://需要添加的两条数据conststudentsData=[{username:"Alice",age:15,hobby:"Painting"},{username:"Tom",age:12,hobby:"Dancing"}];//添加数据,重复添加会报错store.add(studentsData[0]);store.add(studentsData[1]);其余修改、获取、删除类似,举例如下://添加数据,重复添加会更新原数据store.put(studentsData[0]);//根据查找对应的数据存储空间的keyvardata=store.get('Tom');//删除某条记录store.delete(key);//删除存储空间的所有记录store.clear();第五步:索引。indexedDB中有两种索引,一种是自增int值,一种是keyPath:自己指定索引列,下面是第二个keyPath。request.onupgradeneeded=function(e){database=e.target.result;store=db.createObjectStore('学生',{keyPath:'用户名'});store.createIndex('nameIndex','name',{unique:true});store.createIndex('ageIndex','age',{unique:false});};所以我们创建了两个索引nameIndex和ageIndex。createIndex方法的三个参数方便的表示索引名称、索引属性字段名、索引属性值是否唯一。我们知道索引的目的是为了快速定位数据,提高查找速度,然后我们会通过新建的索引来获取数据。//获取指定索引varindex=store.index("nameIndex");//获取数据index.get('Tom').onsuccess=function(e){varstudent=e.target.result;}so我们可以使用索引来快速获取数据。name索引是唯一的,但是age索引只会获取第一个匹配的值。要得到age的所有满足条件的值,需要用到游标。第6步:光标。如果要遍历每个值,可以使用游标,下面是示例代码:varrequest=index.openCursor();//varIDBKeyRange=window.IDBKeyRange||window.webkitIDBKeyRange||window.msIDBKeyRange;//varrequest=index.openCursor(IDBKeyRange.only(26));request.onsuccess=function(e){varcursor=e.target.result;//这里的判断是必要的,必要的,如果没有错,没有whileif(cursor){varstudent=cursor.value;游标.continue();}}这里还要提一下,方法openCursor()或openKeyCursor()可以传一个参数来过滤搜索,具体有以下几种过滤方式:1.IDBKeyRange.only(value):只获取指定的数据;2.IDBKeyRange.lowerBound(value,isOpen):获取数值最小的数据,第二个参数用于表示是否排除数值本身,即数学上是否为开区间;3.IDBKeyRange.upperBound(value,isOpen):与上面类似,用于获取最大值为value的数据;4.IDBKeyRange.bound(value1,value2,isOpen1,isOpen2):参考上面的描述应该不言自明了。需要理解的是,这里的筛选范围指的是索引,也就是使用哪个索引,指定的字段是通过改变索引来创建的。该字段的值为要过滤的坐标。示例代码:https://github.com/yelloxing/...

猜你喜欢