DIV CSS 佈局教程網

 　　介紹

　　IndexedDB是HTML5 WEB數據庫，允許HTML5 WEB應用在用戶浏覽器端存儲數據。對於應用來說IndexedDB非常強大、有用，可以在客戶端的chrome,IE,Firefox等WEB浏覽器中存儲大量數據，下面簡單介紹一下IndexedDB的基本概念。

　　什麼是IndexedDB

　　IndexedDB，HTML5新的數據存儲，可以在客戶端存儲、操作數據，可以使應用加載地更快，更好地響應。它不同於關系型數據庫，擁有數據表、記錄。它影響著我們設計和創建應用程序的方式。IndexedDB 創建有數據類型和簡單的JavaScript持久對象的object，每個object可以有索引，使其有效地查詢和遍歷整個集合。本文為您提供了如何在Web應用程序中使用IndexedDB的真實例子。

　　開始

　　我們需要在執行前包含下面前置代碼

　　JavaScript Code復制內容到剪貼板

　　var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

　　//prefixes of window.IDB objects

　　var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;

　　var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange

　　if (!indexedDB) {

　　alert("Your browser doesn't support a stable version of IndexedDB.")

　　}

　　打開IndexedDB

　　在創建數據庫之前，我們首先需要為數據庫創建數據，假設我們有如下的用戶信息：

　　JavaScript Code復制內容到剪貼板

　　var userData = [

　　{ id: "1", name: "Tapas", age: 33, email: "tapas@example.com" },

　　{ id: "2", name: "Bidulata", age: 55, email: "bidu@home.com" }

　　];

　　現在我們需要用open()方法打開我們的數據庫:

　　JavaScript Code復制內容到剪貼板

　　var db;

　　var request = indexedDB.open("databaseName", 1);

　　request.onerror = function(e) {

　　console.log("error: ", e);

　　};

　　request.onsuccess = function(e) {

　　db = request.result;

　　console.log("success: "+ db);

　　};

　　request.onupgradeneeded = function(e) {

　　}

　　如上所示，我們已經打開了名為"databaseName"，指定版本號的數據庫，open()方法有兩個參數：

　　1.第一個參數是數據庫名稱，它會檢測名稱為"databaseName"的數據庫是否已經存在，如果存在則打開它，否則創建新的數據庫。

　　2.第二個參數是數據庫的版本，用於用戶更新數據庫結構。

　　onSuccess處理

　　發生成功事件時“onSuccess”被觸發，如果所有成功的請求都在此處理，我們可以通過賦值給db變量保存請求的結果供以後使用。

　　onerror的處理程序

　　發生錯誤事件時“onerror”被觸發，如果打開數據庫的過程中失敗。

　　Onupgradeneeded處理程序

　　如果你想更新數據庫(創建，刪除或修改數據庫)，那麼你必須實現onupgradeneeded處理程序，使您可以在數據庫中做任何更改。 在“onupgradeneeded”處理程序中是可以改變數據庫的結構的唯一地方。

　　創建和添加數據到表：

　　IndexedDB使用對象存儲來存儲數據，而不是通過表。 每當一個值存儲在對象存儲中，它與一個鍵相關聯。 它允許我們創建的任何對象存儲索引。 索引允許我們訪問存儲在對象存儲中的值。 下面的代碼顯示了如何創建對象存儲並插入預先准備好的數據：

　　JavaScript Code復制內容到剪貼板

　　request.onupgradeneeded = function(event) {

　　var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});

　　for (var i in userData) {

　　objectStore.add(userData[i]);

　　}

　　}

　　我們使用createObjectStore()方法創建一個對象存儲。 此方法接受兩個參數： - 存儲的名稱和參數對象。 在這裡，我們有一個名為"users"的對象存儲，並定義了keyPath，這是對象唯一性的屬性。 在這裡，我們使用“id”作為keyPath，這個值在對象存儲中是唯一的，我們必須確保該“ID”的屬性在對象存儲中的每個對象中存在。 一旦創建了對象存儲，我們可以開始使用for循環添加數據進去。

　　手動將數據添加到表：

　　我們可以手動添加額外的數據到數據庫中。

　　JavaScript Code復制內容到剪貼板

　　function Add() {

　　var request = db.transaction(["users"], "readwrite").objectStore("users")

　　.add({ id: "3", name: "Gautam", age: 30, email: "gautam@store.org" });

　　request.onsuccess = function(e) {

　　alert("Gautam has been added to the database.");

　　};

　　request.onerror = function(e) {

　　alert("Unable to add the information.");

　　}

　　}

　　之前我們在數據庫中做任何的CRUD操作(讀，寫，修改)，必須使用事務。 該transaction()方法是用來指定我們想要進行事務處理的對象存儲。 transaction()方法接受3個參數(第二個和第三個是可選的)。 第一個是我們要處理的對象存儲的列表，第二個指定我們是否要只讀/讀寫，第三個是版本變化。

　　從表中讀取數據

　　get()方法用於從對象存儲中檢索數據。 我們之前已經設置對象的id作為的keyPath，所以get()方法將查找具有相同id值的對象。 下面的代碼將返回我們命名為“Bidulata”的對象：

　　JavaScript Code復制內容到剪貼板

　　function Read() {

　　var objectStore = db.transaction(["users"]).objectStore("users");

　　var request = objectStore.get("2");

　　request.onerror = function(event) {

　　alert("Unable to retrieve data from database!");

　　};

　　request.onsuccess = function(event) {

　　if(request.result) {

　　alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);

　　} else {

　　alert("Bidulata couldn't be found in your database!");

　　}

　　};

　　}

　　從表中讀取所有數據

　　下面的方法檢索表中的所有數據。 這裡我們使用游標來檢索對象存儲中的所有數據：

　　JavaScript Code復制內容到剪貼板

　　function ReadAll() {

　　var objectStore = db.transaction("users").objectStore("users");

　　var req = objectStore.openCursor();

　　req.onsuccess = function(event) {

　　db.close();

　　var res = event.target.result;

　　if (res) {

　　alert("Key " + res.key + " is " + res.value.name + ", Age: " + res.value.age + ", Email: " + res.value.email);

　　res.continue();

　　}

　　};

　　req.onerror = function (e) {

　　console.log("Error Getting: ", e);

　　};

　　}

　　該openCursor()用於遍歷數據庫中的多個記錄。 在continue()函數中繼續讀取下一條記錄。

　　刪除表中的記錄

　　下面的方法從對象中刪除記錄。

　　JavaScript Code復制內容到剪貼板

　　function Remove() {

　　var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");

　　request.onsuccess = function(event) {

　　alert("Tapas's entry has been removed from your database.");

　　};

　　}

　　我們要將對象的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復制內容到剪貼板

　　//db.js

　　//封裝事務操作

　　IDBDatabase.prototype.doTransaction=function(f){

　　f(this.transaction(["Obj"],"readwrite").objectStore("Obj"));

　　};

　　//連接數據庫，成功後調用main函數

　　(function(){

　　//打開數據庫

　　var cn=indexedDB.open("TestDB",1);

　　//創建數據對象

　　cn.onupgradeneeded=function(e){

　　e.target.result.createObjectStore("Obj");

　　};

　　//數據庫連接成功

　　cn.onsuccess=function(e){

　　main(e.target.result);

　　};

　　})();

　　接著是兩個測試頁面

　　把localStorage換成了indexedDB事務處理。但是結果就不同

　　測試的時候b.html中可能不會立即有輸出，因為indexedDB正忙著處理a.html東西，b.html事務丟在了事務丟隊列中等待。但是無論如何，輸出結果也不會是1這個值。因為indexedDB的最小處理單位是事務，而不是localStorage那樣以表達式為單位。這樣只要把lock和unlock之間需要處理的東西放入一個事務中即可實現。另外，浏覽器對indexedDB的支持不如localStorage，所以使用時還得考慮浏覽器兼容。