DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 深入解析HTML5的IndexedDB索引數據庫
深入解析HTML5的IndexedDB索引數據庫
編輯:HTML5詳解     
這篇文章主要介紹了深入解析Html5中的IndexedDB索引數據庫,包括事務鎖等基本功能的相關使用示例,需要的朋友可以參考下

介紹
IndexedDB是Html5 WEB數據庫,允許Html5 WEB應用在用戶浏覽器端存儲數據。對於應用來說IndexedDB非常強大、有用,可以在客戶端的Chrome,IE,Firefox等WEB浏覽器中存儲大量數據,下面簡單介紹一下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@example.com" },   
  3. { id: "2", name: "Bidulata", age: 55, email: "bidu@home.com" }   
  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.第一個參數是數據庫名稱,它會檢測名稱為"databaseName"的數據庫是否已經存在,如果存在則打開它,否則創建新的數據庫。
2.第二個參數是數據庫的版本,用於用戶更新數據庫結構。
 
onSuccess處理
發生成功事件時“onSuccess”被觸發,如果所有成功的請求都在此處理,我們可以通過賦值給db變量保存請求的結果供以後使用。
 
onerror的處理程序
發生錯誤事件時“onerror”被觸發,如果打開數據庫的過程中失敗。
 
Onupgradeneeded處理程序
如果你想更新數據庫(創建,刪除或修改數據庫),那麼你必須實現onupgradeneeded處理程序,使您可以在數據庫中做任何更改。 在“onupgradeneeded”處理程序中是可以改變數據庫的結構的唯一地方。
 
創建和添加數據到表:
IndexedDB使用對象存儲來存儲數據,而不是通過表。 每當一個值存儲在對象存儲中,它與一個鍵相關聯。 它允許我們創建的任何對象存儲索引。 索引允許我們訪問存儲在對象存儲中的值。 下面的代碼顯示了如何創建對象存儲並插入預先准備好的數據:

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()方法創建一個對象存儲。 此方法接受兩個參數: - 存儲的名稱和參數對象。 在這裡,我們有一個名為"users"的對象存儲,並定義了keyPath,這是對象唯一性的屬性。 在這裡,我們使用“id”作為keyPath,這個值在對象存儲中是唯一的,我們必須確保該“ID”的屬性在對象存儲中的每個對象中存在。 一旦創建了對象存儲,我們可以開始使用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個參數(第二個和第三個是可選的)。 第一個是我們要處理的對象存儲的列表,第二個指定我們是否要只讀/讀寫,第三個是版本變化。
 
從表中讀取數據
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()函數中繼續讀取下一條記錄。
刪除表中的記錄
下面的方法從對象中刪除記錄。

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()方法。
 
最終代碼
下面的方法從對象源中刪除一條記錄:

JavaScript Code復制內容到剪貼板
  1. <!DOCTYPE Html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/Html; charset=utf-8" />  
  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@example.com" },   
  17. { id: "2", name: "Bidulata", age: 55, email: "bidu@home.com" }   
  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.     //開始一個事務   
  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.     //開始一個事務   
  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之間需要處理的東西放入一個事務中即可實現。另外,浏覽器對indexedDB的支持不如localStorage,所以使用時還得考慮浏覽器兼容

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved