【51CTO譯文】在《從零開始構建Html 5頁面》一文中，我們了解到HTML 5的一些新增特性並通過實例打造了一個完整的Html 5頁面。但Html 5標准不只局限於傳統的標記語言，它還擁有很多讓人期待的API接口，利用這些接口，開發者可以創建更加豐富、更加引人注目的應用程序。之前我們介紹過支持文件拖放上傳功能的Html 5 File API，今天，我們一起來了解Html 5的Web SQL Database API，使用本地和會話存儲實現簡單的對象持久化。
對於HTML 5，也許最為有用的就是它新推出的“Web Storage”（Web 存儲）API。對簡單的關鍵值對（比如應用程序設置）或簡單對象（如應用程序狀態）進行存儲，使用本地和會話存儲能夠很好地完成，但是在對瑣碎的關系數據進行處理之外，它就力所不及了。而這正是 Html 5 的“Web SQL Database”API 接口的應用所在。
先提個醒，該文下面的內容需要讀者對 JavaScript 和面對對象編程（尤其是匿名內的內部函數）以及SQL具有很好的理解。
打開鏈接
為了打開一個連接，我們執行以下代碼：
- db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000);
以上代碼創建了一個數據庫對象 db，名稱是 Todo，版本編號為0.1。db 還帶有描述信息和大概的大小值。用戶代理（user agent）可使用這個描述與用戶進行交流，說明數據庫是用來做什麼的。利用代碼中提供的大小值，用戶代理可以為內容留出足夠的存儲。如果需要，這個大小是可以改變的，所以沒有必要預先假設允許用戶使用多少空間。
為了檢測之前創建的連接是否成功，你可以檢查那個數據庫對象是否為null：
- if(!db)
- alert("Failed to connect to database.");
絕不可以假設該連接已經成功建立，即使過去對於某個用戶它是成功的。為什麼一個連接會失敗，存在多個原因。也許用戶代理出於安全原因拒絕你的訪問，也許設備存儲有限。面對活躍而快速進化的潛在用戶代理，對用戶的機器、軟件及其能力作出假設是非常不明智的行為。比如，當用戶使用手持設備時，他們可自由處置的數據可能只有幾兆字節。
執行查詢
執行一個查詢，你可以使用database.transaction()函數。該函數具有單一參數，負責查詢實際執行的函數。
該函數（通常是匿名的）具有一個類型事務的參數。
- db.transaction( function(tx) {
該事務具有一個函數：executeSql。這個函數使用四個參數：表示查詢的字符串，插入到查詢中問號所在處的字符串數據（很像 Java 的預先准備好的語句），一個成功時執行的函數和一個失敗時執行的函數。
- tx.executeSql("SELECT COUNT(*) FROM ToDo", [], function(result){}, function(tx, error){});
查詢成功時
當查詢成功執行時，應用程序跳轉至一個具有一對參數的查詢，一個是 transaction，另一個是它搜集的 results。對於實際上將你的數據傳遞至用戶，這是非常完美的，比如顯示 ToDo 列表。有關這個話題後面再講。
查詢失敗失敗時
當查詢沒能執行時執行。由於你將 transaction 對象作為函數的第一個參數進行傳遞，當出現錯誤時你可以繼續執行查詢。例如，如果是因為缺少表格（table）而查詢無法運行，這是創建一個表格並在此執行該語句的絕佳時機。從該函數的第二個參數，你可以獲得有關該錯誤的信息（包括描述）。
示例
假設我們想要使用上面的例子，想要查詢數據庫中的某個表格，如果該表格不存在，我們就創建一個表格。
在這個示例中，我們將調用具有一個函數參數的 db.transaction()。這個參數中，我們調用 tx.executeSql()。如果這個步驟成功，我們不做任何操作（因此是一個null參數）。或者我們將該事務和執行失敗的函數一起傳遞，並再次調用 tx.executeSql()。這一次使用創建查詢。
- db.transaction( function(tx) { tx.executeSql("SELECT COUNT(*) FROM ToDo",
[], null, function(tx, error) { tx.executeSql("CREATE TABLE ToDo (id REAL UNIQUE, label TEXT, timestamp REAL)",
[], null, null); } ); } );
使用所有這些內部方法，可能有點麻煩，所以你也許想在外部創建一個調用 db.transaction() 的函數。比如，我們可以讓錯誤函數是自包含的，並將其命名為“createToDoTable()”。
插入
為了讓代碼更加簡潔和安全，Web SQL Database API 允許你為 transaction.executeSql() 函數提供字符串數據，用以表示調用的 SQL 語句中的變量。我們使用以下的代碼進行演示：
- db.transaction( function(tx) { tx.executeSql("INSERT INTO ToDo (label, timestamp) values(?, ?)",
[label, new Date().getTime()], null, null); } );
在這個示例中，第一個參數中的兩個問號將被後面數組中對應的項替代。第一個是為該任務設置的標簽（也許是我們之前在代碼中定義的一個變量），以及調用函數生成的時間戳。
執行該查詢，其結果與下面語句類似：
- INSERT INTO ToDo (label, timestamp) values ("Test", 1265925077487)
對結果進行處理
成功執行的函數對結果對象包含集合或行。每一列表示一個結果。該結果包含分配給它的一組值，表示該特定結果的數據庫中的每一列的值。通過調用 result.rows.item(i) 可以訪問一個行，其中 i 是你想要查詢的行的指針。想要從一行中選擇一個值，你可以傳遞給該行一個數組格式的字符串指針，它表示你需要查詢的列。例如，如果想要標簽（label）列，我們可以調用 row['label']。
以下代碼使用結果對象來輸出一個查詢的結果：
- db.transaction( function(tx) { tx.executeSql("SELECT * FROM ToDo", [],
- function(tx, result) { for(var i = 0; i < result.rows.length; i++)
- { document.write('<b>' + result.rows.item(i)['label'] + '</b><br />'); } }, null); } );
結論
需要注意的是，如果不是絕對需要的情況，不要使用 Web SQL Database。這不是因為它們的技術高高在上，而是因為它們會讓你的代碼更加復雜。對於大多數情況，本地存儲或會話存儲就能夠完成相應的任務，尤其是你能夠保持對象狀態持久化的情況。
正如前面所說，通過這些Html 5 Web SQL Database API 接口，你可以獲取許多功能。我相信，幾年以後會出現一些非常優秀的、建立在這些 API 之上的應用程序。