MIS2000Lab.的「HTML5 認證考試，從零開始」#22-- 使用 Indexed Database API

DAY 22

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 22 篇

javascript html 網頁設計 asp.net 網頁 database api 鐵人賽網頁程式 html5 mis2000lab indexed indexeddb html

mis2000lab

2014-10-17 10:02:26

5035 瀏覽

分享至

上一篇文章：http://ithelp.ithome.com.tw/question/10160152

Indexed Database API或是IndexedDB提供有效的方法來存放、取得與搜尋瀏覽器在設備上 or 存放在本地的結構化資料。
也可以透過window物件的indexedDB屬性來存取indexedDB。

==== .open()方法與createObjectStore函式 ====

您可以透過 .open()函式開啟資料庫（這裡指的是類似資料庫，用來存放資料的東西），
如果資料庫不存在，那麼.open()就會自動建立它。

IndexedDB是非同步的（Async.）我們可以使用onsuccess事件獲得.open()以後取得的值，也可以透過onerror事件取得失敗的原因。

下面的程式碼範例可以建立一個資料庫的參考並開啟之

var db; // Reference to the database to use
var openRequest = indexedDB.open("contosoDB");

openRequest.onsuccess = function(event) {
db = event.target.result;
};

openRequest.onerror = function(event) {
alert("錯誤訊息: " + event.target.errorCode + "。開啟資料庫時發現錯誤！");
};

// 註解：設定openRequest變數是一個很安全的設定，確保JavaScript程式區塊都完成之後才會啟動onsuccess或onerror事件。

下面的程式碼範例建立了一個attendee物件來存放參與者的個人資料。id屬性則是一個主要索引鍵，用來區分每一位參與者。

var attendee = {
id: "1",
name: "MIS2000 Lab",
password: "Pa$$w0rd"
};

var attendeeStore = db.createObjectStore("attendees", 
{ keyPath: "id" });

==== 各種常用的方法 ====

使用.add()方法將其他記錄存入物件儲存區（object storage），下面的範例會加入Bill Gates這位人物。

var newAttendee = {
id: "2",
name: "Bill Gates",
password: "Pa$$w0rd"
};

var addRequest = attendeeStore.add(newAttendee);

如果您要修改現存的（既有）紀錄，請使用.put()方法。

var updatedAttendee = {
id: "2",     // 修改既有的資料，例如id=2的個人資料。
name: "Bill Gates",
password: "P@ssw0rd" // Change the password
};

var updateRequest = attendeeStore.put(updatedAttendee);

.delete()方法可以用來刪除記錄，

搜尋資料請善用.get()方法

微軟提供另一個網址（http://go.microsoft.com/fwlink/?LinkID=267737）
進一步介紹IndexedDB的範例，讀者可以前往學習。

==== Indexed Database API的範例（I）====

這幾個範例是從W3C官方網站取得（http://www.w3.org/TR/IndexedDB/），

讀者可以從這幾個範例裡面，看到更詳細的作法。請依照自己學習進度來參考本節範例。

部分HTML5的新功能（尤其是IndexedDB API）受限於您的Web Server與瀏覽器版本，

無法保證在所有讀者的電腦上都能正確運作。

建議您安裝最新版的Web Server與瀏覽器，最好多安裝幾套不同廠牌瀏覽器來測試。

範例一：連結一個不存在的資料庫（名為library）並且建立物件與索引。

var request = indexedDB.open("library");

request.onupgradeneeded = function() {
// 資料庫之前不存在，所以必須為它建立物件（object）與索引（index）。
  var db = request.result;

  var store = db.createObjectStore("books", {keyPath: "isbn"});

  var titleIndex = store.createIndex("by_title", "title", {unique: true});
  var authorIndex = store.createIndex("by_author", "author");

     // 加入一些數據、資料。例如：書名、作者、ISBN編號。
     store.put({title: "Quarry Memories", author: "Fred", isbn: 123456});
     store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567});
     store.put({title: "Bedrock Nights", author: "Barney", isbn: 345678});
};

request.onsuccess = function() {
     db = request.result;
};

範例二：使用「交易（transaction）」的方式來做，大致跟範例一雷同。
.put()方法是用來修改既有的紀錄。

var tx = db.transaction("books", "readwrite");
var store = tx.objectStore("books");

store.put({title: "Quarry Memories", author: "Fred", isbn: 123456});
store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567});
store.put({title: "Bedrock Nights", author: "Barney", isbn: 345678});

tx.oncomplete = function() {
// 如果所有要求都成功了，這裡可以撰寫交易成功（transaction commit）的程式碼。
};

微軟網站有另外一個 Indexed Database的大範例

您也可以參考一下 http://msdn.microsoft.com/en-us/library/ie/jj154908(v=vs.85).aspx

不要走開，馬上回來

請看下一篇文章：Application Cache -- http://ithelp.ithome.com.tw/question/10160498

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯