使用 HTML5 網路資料庫的簡易待辦事項清單

Paul Kinlan

簡介

網路資料庫是 HTML5 的新功能。網路資料庫會在使用者的瀏覽器中代管及保留。藉由允許開發人員建立具備多元查詢功能的應用程式，就能預期新型網頁應用程式將能夠在線上及離線運作。

本文中的範例程式碼示範如何建立非常簡單的待辦事項清單管理工具。本課程僅概略介紹 HTML5 的部分功能

必要條件

此範例使用命名空間來封裝資料庫邏輯。

var html5rocks = {};
html5rocks.webdb = {};

非同步和交易

在大多數的情況下，您將使用非同步 API。非同步 API 是非封鎖的系統，因此不會透過回傳值取得資料，而會接收資料傳送到已定義的回呼函式。

透過 HTML 的網路資料庫支援屬於交易性質。您無法在交易之外執行 SQL 陳述式。交易分為兩種類型：讀取/寫入交易 (transaction()) 和唯讀交易 (readTransaction())。請注意，讀取/寫入會鎖定整個資料庫。

步驟 1：開啟資料庫

資料庫必須先開啟才能存取。
您需要定義資料庫的名稱、版本、說明和大小。

html5rocks.webdb.db = null;

html5rocks.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
html5rocks.webdb.db = openDatabase("Todo", "1", "Todo manager", dbSize);
}

html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}

html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
// loadTodoItems is defined in Step 4a
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}

步驟 2：建立資料表

您只能在交易內執行 CREATE TABLE SQL 狀態來建立資料表。

我們已定義一個函式，該函式會在 body onload 事件中建立資料表。如果資料表不存在，系統會建立資料表。

表格稱為待辦事項，其中包含 3 欄。

  • ID - 遞增的序列 ID 欄
  • 待辦事項 - 文字欄，代表項目主體
  • add_on - 建立待辦事項項目的時間
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS " +
                "todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
});
}

步驟 3：在資料表中新增資料

我們正在建構待辦事項清單管理工具，所以在資料庫中加入待辦事項項目非常重要。

系統會在交易中建立交易，並在執行待辦事項資料表內執行 INSERT。

runSql 需要執行數個參數、SQL 要執行的參數，以及繫結查詢的參數值。

html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var addedOn = new Date();
tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
    [todoText, addedOn],
    html5rocks.webdb.onSuccess,
    html5rocks.webdb.onError);
});
}

步驟 4：從資料表選取資料

現在資料已位於資料庫中，您需要一個函式取回資料。在 Chrome 中，網路資料庫使用標準 SQLite SELECT 查詢。

html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
    html5rocks.webdb.onError);
});
}

請注意，本範例中使用的這些指令都是非同步的，因此資料不會從交易或 runSql 呼叫傳回。結果會傳遞至成功回呼。

步驟 4a：轉譯資料表中的資料

從資料表擷取資料後，系統會呼叫 loadTodoItems 方法。

onSuccess 回呼使用兩個參數。首先是查詢的交易，第二個則是結果集。疊代資料十分簡單：

function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}

todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return "<li>" + row.todo + 
        " [<a href='javascript:void(0);' onclick=\'html5rocks.webdb.deleteTodo(" + 
        row.ID +");\'>Delete</a>]</li>";
}

這個方法呼叫的效果是，待辦事項清單會算繪成名為「todoItems」的 DOM 元素。

步驟 5：從資料表刪除資料

html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
    html5rocks.webdb.onSuccess,
    html5rocks.webdb.onError);
});
}

步驟 6：搞定一切

網頁載入時，請開啟資料庫並建立資料表 (如有需要)，然後轉譯資料庫中可能存在的所有待辦事項。

....
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
</script>

<body onload="init();">

該函式需要可將資料移出 DOM，因此請呼叫 html5rocks.webdb.addTodo 方法

function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}