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