iT邦幫忙

DAY 22
5

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

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

上一篇文章: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. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#21-- Local Storage(永久存放區)
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#23-- 使用Application Cache加入離線支援
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言