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: "[email protected]" },   
  3. { id: "2", name: "Bidulata", age: 55, email: "[email protected]" }   
  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: "[email protected]" });   
  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: "[email protected]" },   
  17. { id: "2", name: "Bidulata", age: 55, email: "[email protected]" }   
  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: "[email protected]" });   
  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，所以使用時還得考慮浏覽器兼容

HTML5詳解
html5視頻應用
今天發現一個不錯的例 子，拿出來和大家分享一下呵呵Html5的應用簡單試驗部分源代碼：<!D
HTML5夢幻之旅――炫麗的流星雨效果實現過程
徐家破鏡昏如霧。半面人間露。等閒相約是看燈。誰料人間天上、似流星。朱門簾影深深雨。憔悴新人舞。天涯
使用HTML5的Notification API制作web通知的教程
這篇文章主要介紹了使用Html5的Notification API制作web通知的教程,示例包括需

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
HTML5在a標簽內放置塊級元素示例代碼 html5 Canvas畫圖教程(11)—使用lineTo/arc/bezierCurveTo畫橢圓形 封裝Html5 Fullscreen API HTML5特性檢測--檢測技術 html5使用canvas繪制太陽系效果 HTML5：Details元素 8個經典炫酷的HTML5 Canvas動畫欣賞 HTML4和HTML5之間除了相似以外的10個主要不同 html5畫布旋轉效果示例 html5更簡化了
熱門推薦
html5 Canvas畫圖教程(7)—canvas裡畫曲線之quadraticCurveTo方法 語義化結構化規范化 針對HTML5的Web Worker使用攻略 html5制作能在微信轉發的動畫賀卡 HTML5之SVG 2D入門1—SVG(可縮放矢量圖形)概述 整理HTML5的一些新特性與Canvas的常用屬性 使用 HTML5 Canvas 制作水波紋效果點擊圖片就會觸發 HTML5中meta屬性的使用方法 canvas使用注意點總結
大家都在看
帶你認識HTML5中的WebSocket 如何大幅提高Javascript性能 何問起海報畫廊代碼注釋 js的toUpperCase方法用法實例 CSS制作3D風格的網頁按鈕特效代碼 js獲取字符串最後一位方法匯總 js sort 二維數組排序的用法小結 高性能Javascript筆記 數據的存儲與訪問性能優化
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved