《2022年IndexDB初级教程 .pdf》由会员分享，可在线阅读，更多相关《2022年IndexDB初级教程 .pdf（8页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、IndexDB 初级教程IndexedDB 是用于客户端的大量的结构化数据存储和使用索引高效率搜索数据的API，它是基于W3C 拟定的草案索引数据库的API。相对DOM 存储的小存储数据量，IndexedDB具有大容量的数据存储功能，它分别为同步数据和异步数据提供的API，但目前只有异步数据的 API在 Gecko2.0 上实现。一、概述1.IndexedDB 存储为键值对：它可以存储一些复杂的对象，而键可以存储这些对像的属性值，并且可以使用索引对对象的属性的快速检索。2.IndexedDB 建立在交互数据库模型的基础上：任何对IndexedDB 的操作都发生一个交互操作（ transacti
2、on ） ，如它提供的索引、表、游标等均与一个transaction 关联，它定义了交互的生存时间与结束时抛出的事件，这样能很好的处理web 程序在不同的 tab 窗口中实例的互操作。3.IndexedDB 的 API 大多是异步的：你可以向数据库发出操作的“请求”，当操作完成时会产生一个DOM 事件，通过事件的类型会知道操作是否成功。4.IndexedDB 使用“请求”机制：操作对象会接收到DOM 的 success和 failure 事件，它也有相应的onsuccess和 onerror 的属性；对象还有readyState、 result 和 errorCode属性来查看当前“请求”的状
3、态，而result 属性则根据不同的“请求”返回不同的结果。5.IndexedDB 使用 DOM 事件机制来处理 “请求” 的结果： DOM 事件的 type 属性提示操作是否成功，target 属性指向发生“请求”的对象（大多数情况下是IDBRequest对象） 。6.IndexedDB 工作基本模式：创建一个交互操作对象发送操作“请求”通过监听DOM 事件等待操作完成处理“请求”结果二、打开数据库IndexedDB 的操作对象是以moz 开头，如我们打开一个数据库如下：Var request = mozIndexedDB.open(MyTestDatabase); mozIndexedDB
4、 对象只有一个open 方法，它的参数即为数据库的名称，它返回一个IDBRequest 对象。接下来要做的就是为request 添加 onsuccess 和 onerror 事件的处理，它们分别在返回的DOM 事件的 type 为 success和 error 时调用， request.onerror = function(event) / Do something with request.errorCode! ; request.onsuccess = function(event) / Do something with request.result! ; IndexedDB 采用最小化
5、的错误事件处理，你不会看到很多类型的错误，它只提供一个错误的事件， 可以通过 event.target.errorCode 来查看错误的信息，通常大多的错误都是用户不允许web 操作本地的数据库，远程web 所拥有的权限问题。三、设置数据库的version 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 8 页 - - - - - - - - - 当创建数据库之后，需要添加数据，IndexedDB 采用对象存储。首先要检查数据库的版本，若不是所期望的值，就要调用setVe
6、rion()方法来设置它的版本，如：if (db.version != 1.0) var request = db.setVersion(1.0); request.onerror = function(event) / Handle errors. ; request.onsuccess = function(event) / Set up the database structure here! ; IndexedDB 存储的每一个对象均与一个key 关联，关于key 的获取方法参见（） 。同时我们还可以为对你的存储创建一个Index 来查看存储对象部分属性值，如存储人的信息的数据库，我们
7、希望保证不同的人拥有不同的email，就可以使用index 和 unique flag来设置，如：/ This is what our customer data looks like. const customerData = ssn: 444-44-4444, name: Bill, age: 35, email: , ssn: 555-55-5555, name: Donna, age: 32, email: donnahome.org ; var request = db.setVersion(1.0); request.onerror = function(event) / Hand
8、le errors. ; request.onsuccess = function(event) / Create an objectStore to hold information about our customers. Were/ going to use ssn as our key path because its guaranteed to be / unique. var objectStore = db.createObjectStore(customers, keyPath: ssn );/ Create an index to search customers by na
9、me. We may have duplicates / so we cant use a unique index.objectStore.createIndex(name, name, unique: false ); / Create an index to search customers by email. We want to ensure that / no two customers have the same email, so use a unique index.objectStore.createIndex(email, email, unique: true );/
10、Store values in the newly created objectStore. for (i in customerData) objectStore.add(customerDatai); ; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 8 页 - - - - - - - - - creatObjectStore() 方法和 createIndex （）方法都有一个可选的对象选项来区分是创建数据库还是索引。creatObjectStore() 方法会请
11、求 “customers” 创建存储对象，并以 ssn属性为存储对象的键值，任何试图存储进数据库的对象都需要有ssn属性； 我们也可以通name 的这个 Index 来查看存储对象，但对于没有name 属性的对象将不会显示出来。向数据库中添加数据四、在添加数据之前，需要先创建一个transaction，创建的方法有三个参数，后两个为可选的，第一个为要关联的数据库名称数组，第二个为打开此数据库的方式（如只读），若无则打开的方式为只读，如：var transaction = db.transaction(customers,IDBTransaction.READ_WRITE); 一个 transa
12、ction 生存时间是与DOM 事件相关联的， 如果创建它之后并在返回的事件中没有使用它，就会消亡，唯一让它处理激活状态的就去是使用“请求”机制，当一个请求完成后， 在它的回调函数中继续请求，否则 transaction 就是会消亡。 一个 transaction有三个事件，为onerror 、onsuccess和 onabort ，一个简单的例子：/ Do something when all the data is added to the database. transaction.oncomplete = function(event) alert(All done!); ; tran
13、saction.onerror = function(event) / Dont forget to handle errors! ; var objectStore = transaction.objectStore(customers);for (var i in customerData) var request = objectStore.add(customerDatai); request.onsuccess = function(event) / event.target.result = customerDatai.ssn ; 五、从数据库中删除数据删除数据很简单，如下：var
14、 request = db.transaction(customers, IDBT ransaction.READ_WRITE) .objectStore(customers) .delete(444-44-4444); request.onsuccess = function(event) / Its gone! ; 六、数据库中取数据使用 get()方法，参数为存储对象的key，如：db.transaction(customers).objectStore(customers).get(444-44-4444).onsuccess = function(event) alert(Name
15、for SSN 444-44-4444 is + event.target.result.name); ; 七、使用游标名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 8 页 - - - - - - - - - 使用 get()方法需要知道存储对象的key值，但若不知道key 值，要看存储对象， 就可以使用游标，如下：var objectStore = db.transaction(customers).objectStore(customers);objectStore
16、.openCursor().onsuccess = function(event) var cursor = event.target.result; if (cursor) alert(Name for SSN + cursor.key + is + cursor.value.name);cursor.continue(); else alert(No more entries!); ; openCursor()方法有许多参数，首先你可设置遍历的Key 的范围，其次可以设置游标遍历的方向。 Continue();表示继续遍历。八、使用索引在数据库中，所有的数据都是以SSN以 key 值来存储
17、的，若要通过name 等其他属性查看存储对象， 需要遍历每个SSN并将它的 name 提取出判断是否为要查看的对象，但可以通过 index 而更为简单的实现，如：var index = objectStore.index(name); index.get(Donna).onsuccess = function(event) alert(Donnas SSN is + event.target.result.ssn); ; 我们还可以通过index 使用 cursor 来遍历存储的数据，并根据不同的cursor 打开方式，返回不同的遍历结果，如下两种方式：index.openCursor().o
18、nsuccess = function(event) var cursor = event.target.result; if (cursor) / cursor.key is a name, like Bill, and cursor.value is the whole object. alert(Name: + cursor.key + , SSN: + cursor.value.ssn + , email: + cursor.value.email); cursor.continue(); ; index.openKeyCursor().onsuccess = function(eve
19、nt) var cursor = event.target.result; if (cursor) / cursor.key is a name, like Bill, and cursor.value is the SSN. / No way to directly get the rest of the stored object. alert(Name: + cursor.key + , SSN: + cursor.value);cursor.continue(); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心
20、整理 - - - - - - - 第 4 页，共 8 页 - - - - - - - - - ; 九、关于游标遍历的范围和方向如果想要限制游标的遍历范围，可以使用 “key range”的对象， 并将它做为openCursor()和 openKeyCursor()的第一个参数， 这样的范围可以是单个键值、或是一个最低边界和最高边界的范围，并规定是否包括范围，如下：/ Only match Donna var singleKeyRange = IDBKeyRange.only(Donna); / Match anything past Bill, including Bill var lower
21、BoundKeyRange = IDBKeyRange.lowerBound(Bill);/ Match anything past Bill, but dont include Bill var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound(Bill, true); / Match anything up to, but not including, Donna var upperBoundOpenKeyRange = IDBKeyRange.upperBound(Donna, true); /Match anything between B
22、ill and Donna, but not including Donna var boundKeyRange = IDBKeyRange.bound(Bill, Donna, false, true); index.openCursor(boundKeyRange).onsuccess = function(event) var cursor = event.target.result; if (cursor) / Do something with the matches.cursor.continue(); ; 另外， 还可以规定游标遍历的方向，默认的是上升的方向，若使用相反的方向，可
23、以将PREV作为 openCursor()或是 openKeyCursor()的第二个参数，如下：objectStore.openCursor(null, IDBCursor.PREV).onsuccess = function(event) var cursor = event.target.result; if (cursor) / Do something with the entries. cursor.continue(); ; 需要注意的是， 在索引中使用游标时，由于可能有多个键值是相同的，这时候总是返回最 低 边 界 的 那 一 个 对 象 ， 为 解 决 此 问 题 ， 将NE
24、XT_NO_DUPLICATE 或 是PREV_NO_DUPLICATE 做为它的第二个参数，如下：index.openKeyCursor(null, IDBCursor.NEXT_NO_DUPLICATE).onsuccess = function(event) var cursor = event.target.result; if (cursor) / Do something with the entries. cursor.continue(); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - -
25、 - - - - 第 5 页，共 8 页 - - - - - - - - - ; 十、数据库版本的变化当 web app 需要请求数据库的变化时，要考虑用户在一个tab 中打开老版本的app，而在另一个tab 窗口中打开新版本的app 时会发生什么情况，当你调用setVersion()时，所有其它打的数据库必须显示的接受该请求时，你才能对数据库进行更改。mozIndexedDB.open(MyTestDatabase).onsuccess = function(event) var db = event.target.result; / If the database is at the co
26、rrect version then we can skip straight to using it.if (db.version = 1.0) useDatabase(db); return; / Check that the database isnt a newer version already.if (db.version != ) alert(Database has a version which we dont know how to upgrade!); return; / Otherwise we need to change the version.var reques
27、t = db.setVersion(1.0); request.onblocked = function(event) / If some other tab is loaded with the database, then it needs to be closed / before we can proceed.alert(Please close all other tabs with this site open!); ; request.onsuccess = function(event) / All other databases have been closed. Set e
28、verything up.db.createObjectStore(/* . */); useDatabase(db); ; ; function useDatabase(db) / Make sure to add a handler to be notified if another page requests a version / change. We must close the database. This allows the other page to upgrade the database. / If you dont do this then the upgrade wo
29、nt happen until the user close the tab. db.onversionchange = function(event) db.close(); alert(A new version of this page is ready. Please reload!); ; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 8 页 - - - - - - - - - / Do stuff with the database. 十一、使用 javas
30、cript Generators 注意：这只能在firefox 中使用，不支持IE、 chrome、Safari Generators 在 firefox 中用于简化异步代码， 但只能在 javascript 1.7 及后续的版本上， 如： myScript.js 的内容如下：/ Need to stash the generator in a global variable. var generator; / Simple event listener function to pass the received event to the generator. function grabEve
31、nt(event) generator.send(event); / When were all done we can close the generator, but that must happen outside/ of the generator so we use a timeout. function closeGenerator() setTimeout(function() generator.close(); , 0); / Our main steps function databaseOperation() mozIndexedDB.open(MyTestDatabas
32、e).onsuccess = grabEvent; var event = yield; var db = event.target.result; if (db.version != 1.0) db.setVersion(1.0).onsuccess = grabEvent; event = yield; var transaction = event.transaction; db.createObjectStore(stuff); transaction.oncomplete = grabEvent; yield; db.transaction(stuff).objectStore(st
33、uff).get(foo).onsuccess = grabEvent; event = yield; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 8 页 - - - - - - - - - alert(Got result: + event.target.result); / Were all done. closeGenerator(); / Always have an extra yield at the end or you will see StopIte
34、ration / exceptions. yield; generator = databaseOperation(); generator.next(); 十二、安全性需要注意的是IndexedDB 在以 iframe 等方式加载到其它网站/网页是是不可运用的。IDBRequest 它反应了向数据库IDBDatabase 发出的请求的状况属 性 ： onsuccess - 类 型 为 函 数 ， 请 求 成 功后 执 行 ， 参数 为 请 求 成 功产 生 的event（IDBSuccessEvent, IDBTransactionEvent ）Onerror - 类型为函数，请求出错时执行
35、，参数为错误时的event（ IDBErrorEvent）readyState - 请求的状态，“1”为正在执行， “2”为执行完成示例： var request = mozIndexedDB.open(MyTestDatabase) ; request.onerror = function(event) /handle error ;request.onsuccess=function(event) var db = request.result; / 得 到 数 据 库 对 象 ， 或db=event.target.result; ; IDBSuccessEvent 向 IndexedDB 请求成功后产生的DOM 事件属性：使用event.target.result 来得到请求成功后返回的结果，参见IDBRequest 中示例名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 8 页 - - - - - - - - -