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

Paul Kinlan

簡介

網路資料庫是 HTML5 的新功能。網頁資料庫會託管並保存在使用者的瀏覽器中。我們預期，只要允許開發人員建立具備豐富查詢功能的應用程式，就能催生出新一代的網頁應用程式，無論在線上或離線狀態下都能運作。

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

必要條件

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

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

非同步和交易

在大多數情況下，如果您使用 Web 資料庫支援，則會使用非同步 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 事件中建立表格。如果資料表不存在，系統會建立資料表。

資料表名為 todo，有 3 個資料欄。

  • ID：遞增的依序 ID 欄
  • todo：文字欄，代表項目的內文
  • added_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 至待辦事項資料表。

executeSql 接受多個參數，包括要執行的 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 中，Webdatabase 使用標準 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);
});
}

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

步驟 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 = "";
}