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

Paul Kinlan

簡介

網路資料庫是 HTML5 的新功能。網路資料庫會在使用者的瀏覽器中託管及保留。允許開發人員建立具備豐富查詢功能的應用程式，我們預期將有新類型的網頁應用程式出現，能夠在線上和離線狀態下運作。

本文的程式碼範例說明如何建立非常簡單的待辦事項清單管理工具。這項服務會概略介紹 HTML5 提供的部分功能。

必備條件

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

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

非同步和交易

在大多數使用 Web Database 支援的情況下，您會使用非同步 API。非同步 API 是無阻斷系統，因此不會透過傳回值取得資料，而是會將資料傳送至定義的回呼函式。

透過 HTML 支援的 Web 資料庫是交易式資料庫。無法在交易外執行 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 = "";
}