深层次分析HTML5的IndexedDB数据库索引数据信息库

日期：2021-01-19 类型：科技新闻 

关键词：html网页制作，php网页制作，网页设计稿，网页编辑工具，学生网页设计模板

详细介绍
IndexedDB是HTML5 WEB数据信息库，容许HTML5 WEB运用在客户访问器端储存数据信息。针对运用来讲IndexedDB十分强劲、有效，能够在顾客端chrome,IE,Firefox等WEB访问器中储存很多数据信息，下面简易详细介绍1下IndexedDB的基础定义。
 
甚么是IndexedDB
IndexedDB，HTML5新的数据信息储存，能够在顾客端储存、实际操作数据信息，可使运用载入地更快，更好地回应。它不一样于关联型数据信息库，有着数据信息表、纪录。它危害着大家设计方案和建立运用程序流程的方法。IndexedDB 建立了解据种类和简易的JavaScript长久目标的object，每一个object能够有数据库索引，使其合理地查寻和遍历全部结合。本文为您出示了怎样在Web运用程序流程中应用IndexedDB的真正事例。
 
刚开始
大家必须在实行前包括下眼前置编码

JavaScript Code拷贝內容到剪贴板
  1. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
  2.     
  3. //prefixes of window.IDB objects   
  4. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;   
  5. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
  6.     
  7. if (!indexedDB) {   
  8. alert("Your browser doesn't support a stable version of IndexedDB.")   
  9. }  

 
开启IndexedDB
在建立数据信息库以前，大家最先必须为数据信息库建立数据信息，假定大家有以下的客户信息内容：

JavaScript Code拷贝內容到剪贴板
  1. var userData = [   
  2. { id: "1", name: "Tapas", age: 33, email: "tapas" },   
  3. { id: "2", name: "Bidulata", age: 55, email: "bidu" }   
  4. ];  

如今大家必须用open()方式开启大家的数据信息库:

JavaScript Code拷贝內容到剪贴板
  1. var db;   
  2. var request = indexedDB.open("databaseName", 1);   
  3.     
  4. request.onerror = function(e) {   
  5. console.log("error: ", e);   
  6. };   
  7.     
  8. request.onsuccess = function(e) {   
  9. db = request.result;   
  10. console.log("success: "+ db);   
  11. };   
  12. request.onupgradeneeded = function(e) {   
  13.     
  14. }  

如上所示，大家早已开启了名为"databaseName"，特定版本号号的数据信息库，open()方式有两个主要参数：
1.第1个主要参数是数据信息库名字，它会检验名字为"databaseName"的数据信息库是不是早已存在，假如存在则开启它，不然建立新的数据信息库。
2.第2个主要参数是数据信息库的版本号，用于客户升级数据信息库构造。
 
onSuccess解决
产生取得成功恶性事件时“onSuccess”被开启，假如全部取得成功的恳求都在此解决，大家能够根据取值给db自变量储存恳求的結果供之后应用。
 
onerror的解决程序流程
产生不正确恶性事件时“onerror”被开启，假如开启数据信息库的全过程中不成功。
 
Onupgradeneeded解决程序流程
假如你想升级数据信息库（建立，删掉或改动数据信息库），那末你务必完成onupgradeneeded解决程序流程，使您能够在数据信息库中做任何变更。 在“onupgradeneeded”解决程序流程中是能够更改数据信息库的构造的唯1地区。
 
建立和加上数据信息到表：
IndexedDB应用目标储存来储存数据信息，而并不是根据表。 每当1个值储存在目标储存中，它与1个键有关联。 它容许大家建立的任何目标储存数据库索引。 数据库索引容许大家浏览储存在目标储存中的值。 下面的编码显示信息了怎样建立目标储存并插进预先提前准备好的数据信息：

JavaScript Code拷贝內容到剪贴板
  1. request.onupgradeneeded = function(event) {   
  2. var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});   
  3. for (var i in userData) {   
  4. objectStore.add(userData[i]);    
  5. }   
  6. }  

大家应用createObjectStore（）方式建立1个目标储存。 此方式接纳两个主要参数： - 储存的名字和主要参数目标。 在这里，大家有1个名为"users"的目标储存，并界定了keyPath，这是目标唯1性的特性。 在这里，大家应用“id”做为keyPath，这个值在目标储存中是唯1的，大家务必保证该“ID”的特性在目标储存中的每一个目标中存在。 1旦建立了目标储存，大家能够刚开始应用for循环系统加上数据信息进去。
 
手动式将数据信息加上到表：
大家能够手动式加上附加的数据信息到数据信息库中。

JavaScript Code拷贝內容到剪贴板
  1. function Add() {   
  2. var request = db.transaction(["users"], "readwrite").objectStore("users")   
  3. .add({ id: "3", name: "Gautam", age: 30, email: "gautam@store.org" });   
  4.     
  5. request.onsuccess = function(e) {   
  6. alert("Gautam has been added to the database.");   
  7. };   
  8.     
  9. request.onerror = function(e) {   
  10. alert("Unable to add the information.");    
  11. }   
  12.     
  13. }  

以前大家在数据信息库中做任何的CRUD实际操作（读，写，改动），务必应用事务管理。 该transaction()方式是用来特定大家要想开展事务管理解决的目标储存。 transaction()方式接纳3个主要参数（第2个和第3个是可选的）。 第1个是大家要解决的目标储存的目录，第2个特定大家是不是要写保护/读写能力，第3个是版本号转变。
 
从表格中载入数据信息
get()方式用于从目标储存中查找数据信息。 大家以前早已设定目标的id做为的keyPath，因此get()方式将搜索具备同样id值的目标。 下面的编码将回到大家取名为“Bidulata”的目标：

JavaScript Code拷贝內容到剪贴板
  1. function Read() {   
  2. var objectStore = db.transaction(["users"]).objectStore("users");   
  3. var request = objectStore.get("2");   
  4. request.onerror = function(event) {   
  5. alert("Unable to retrieve data from database!");   
  6. };   
  7. request.onsuccess = function(event) {    
  8. if(request.result) {   
  9. alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);   
  10. } else {   
  11. alert("Bidulata couldn't be found in your database!");    
  12. }   
  13. };   
  14. }  

 
从表格中载入全部数据信息
下面的方式查找表格中的全部数据信息。 这里大家应用游标来查找目标储存中的全部数据信息：

JavaScript Code拷贝內容到剪贴板
  1. function ReadAll() {   
  2. var objectStore = db.transaction("users").objectStore("users");    
  3. var req = objectStore.openCursor();   
  4. req.onsuccess = function(event) {   
  5. db.close();   
  6. var res = event.target.result;   
  7. if (res) {   
  8. alert("Key " + res.key + " is " + res.value.name + ", Age: " + res.value.age + ", Email: " + res.value.email);   
  9. res.continue();   
  10. }   
  11. };   
  12. req.onerror = function (e) {   
  13. console.log("Error Getting: ", e);   
  14. };    
  15. }  

该openCursor()用于遍历数据信息库中的好几个纪录。 在continue()涵数中再次载入下1条纪录。
删掉表格中的纪录
下面的方式从目标中删掉纪录。

JavaScript Code拷贝內容到剪贴板
  1. function Remove() {    
  2. var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");   
  3. request.onsuccess = function(event) {   
  4. alert("Tapas's entry has been removed from your database.");   
  5. };   
  6. }  

大家要将目标的keyPath做为主要参数传送给delete()方式。
 
最后编码
下面的方式从目标源中删掉1条纪录：

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />  
  4. <title>IndexedDB</title>  
  5. <script type="text/javascript">  
  6. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
  7.     
  8. //prefixes of window.IDB objects   
  9. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;   
  10. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
  11.     
  12. if (!indexedDB) {   
  13. alert("Your browser doesn't support a stable version of IndexedDB.")   
  14. }   
  15. var customerData = [   
  16. { id: "1", name: "Tapas", age: 33, email: "tapas" },   
  17. { id: "2", name: "Bidulata", age: 55, email: "bidu" }   
  18. ];   
  19. var db;   
  20. var request = indexedDB.open("newDatabase", 1);   
  21.     
  22. request.onerror = function(e) {   
  23. console.log("error: ", e);   
  24. };   
  25.     
  26. request.onsuccess = function(e) {   
  27. db = request.result;   
  28. console.log("success: "+ db);   
  29. };   
  30.     
  31. request.onupgradeneeded = function(event) {   
  32.     
  33. }   
  34. request.onupgradeneeded = function(event) {   
  35. var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});   
  36. for (var i in userData) {   
  37. objectStore.add(userData[i]);    
  38. }   
  39. }   
  40. function Add() {   
  41. var request = db.transaction(["users"], "readwrite")   
  42. .objectStore("users")   
  43. .add({ id: "3", name: "Gautam", age: 30, email: "gautam@store.org" });   
  44.     
  45. request.onsuccess = function(e) {   
  46. alert("Gautam has been added to the database.");   
  47. };   
  48.     
  49. request.onerror = function(e) {   
  50. alert("Unable to add the information.");    
  51. }   
  52.     
  53. }   
  54. function Read() {   
  55. var objectStore = db.transaction("users").objectStore("users");   
  56. var request = objectStore.get("2");   
  57. request.onerror = function(event) {   
  58. alert("Unable to retrieve data from database!");   
  59. };   
  60. request.onsuccess = function(event) {    
  61. if(request.result) {   
  62. alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);   
  63. } else {   
  64. alert("Bidulata couldn't be found in your database!");    
  65. }   
  66. };   
  67. }   
  68. function ReadAll() {   
  69. var objectStore = db.transaction("users").objectStore("users");    
  70. var req = objectStore.openCursor();   
  71. req.onsuccess = function(event) {   
  72. db.close();   
  73. var res = event.target.result;   
  74. if (res) {   
  75. alert("Key " + res.key + " is " + res.value.name + ", Age: " + res.value.age + ", Email: " + res.value.email);   
  76. res.continue();   
  77. }   
  78. };   
  79. req.onerror = function (e) {   
  80. console.log("Error Getting: ", e);   
  81. };    
  82. }   
  83. function Remove() {    
  84. var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");   
  85. request.onsuccess = function(event) {   
  86. alert("Tapas's entry has been removed from your database.");   
  87. };   
  88. }   
  89. </script>  
  90. </head>  
  91.     
  92. <body>  
  93. <button onclick="Add()">Add record</button>  
  94. <button onclick="Remove()">Delete record</button>  
  95. <button onclick="Read()">Retrieve single record</button>  
  96. <button onclick="ReadAll()">Retrieve all records</button>  
  97. </body>  
  98. </html>  

锁

localStorage是不带lock作用的。那末要完成前端开发的数据信息共享资源而且必须lock作用那就必须应用其它本存储方法，例如indexedDB。indededDB应用的是事务管理解决的体制，那具体上便是lock作用。
　　做这个检测必须先简易的封裝下indexedDB的实际操作，由于indexedDB的联接较为不便，并且两个检测网页页面都必须用到

JavaScript Code拷贝內容到剪贴板
  1. //db.js   
  2. //封裝事务管理实际操作   
  3. IDBDatabase.prototype.doTransaction=function(f){   
  4.   f(this.transaction(["Obj"],"readwrite").objectStore("Obj"));   
  5. };   
  6. //联接数据信息库，取得成功后启用main涵数   
  7. (function(){   
  8.   //开启数据信息库   
  9.   var cn=indexedDB.open("TestDB",1);   
  10.   //建立数据信息目标   
  11.   cn.onupgradeneeded=function(e){   
  12.     e.target.result.createObjectStore("Obj");   
  13.   };   
  14.   //数据信息库联接取得成功   
  15.   cn.onsuccess=function(e){   
  16.     main(e.target.result);   
  17.   };   
  18. })();   
  19. 　　接着是两个检测网页页面   
  20. <script src="db.js"></script>  
  21. <script>  
  22. //a.html   
  23. function main(e){   
  24.   (function callee(){   
  25.     //刚开始1个事务管理   
  26.     e.doTransaction(function(e){   
  27.       e.put(1,"test"); //设定test的值为1   
  28.       e.put(2,"test"); //设定test的值为2   
  29.     });   
  30.     setTimeout(callee);   
  31.   })();   
  32. };   
  33. </script>  
  34. <script src="db.js"></script>  
  35. <script>  
  36. //b.html   
  37. function main(e){   
  38.   (function callee(){   
  39.     //刚开始1个事务管理   
  40.     e.doTransaction(function(e){   
  41.       //获得test的值   
  42.       e.get("test").onsuccess=function(e){   
  43.         console.log(e.target.result);   
  44.       };   
  45.     });   
  46.     setTimeout(callee);   
  47.   })();   
  48. };   
  49. </script>  

把localStorage换为了indexedDB事务管理解决。可是結果就不一样

检测的情况下b.html中将会不容易马上有輸出，由于indexedDB正忙着解决a.html物品，b.html事务管理丢在了事务管理丢序列中等候。可是不管怎样，輸出結果也不容易是1这个值。由于indexedDB的最少解决企业是事务管理，而并不是localStorage那样以表述式为企业。这样要是把lock和unlock之间必须解决的物品放入1个事务管理中便可完成。此外，访问器对indexedDB的适用比不上localStorage，因此应用时还得考虑到访问器适配。

上一篇：萌系手机微信h5手机游戏大结合！（附便捷制做实 返回下一篇：没有了