在《從零開始構(gòu)建HTML 5頁(yè)面》一文中，我們了解到HTML 5的一些新增特性并通過(guò)實(shí)例打造了一個(gè)完整的HTML 5頁(yè)面。但HTML 5標(biāo)準(zhǔn)不只局限于傳統(tǒng)的標(biāo)記語(yǔ)言，它還擁有很多讓人期待的API接口，利用這些接口，開發(fā)者可以創(chuàng)建更加豐富、更加引人注目的應(yīng)用程序。之前我們介紹過(guò)支持文件拖放上傳功能的HTML 5 File API，今天，我們一起來(lái)了解HTML 5的Web SQL Database API，使用本地和會(huì)話存儲(chǔ)實(shí)現(xiàn)簡(jiǎn)單的對(duì)象持久化。

對(duì)于HTML 5，也許最為有用的就是它新推出的“Web Storage”（Web 存儲(chǔ)）API。對(duì)簡(jiǎn)單的關(guān)鍵值對(duì)（比如應(yīng)用程序設(shè)置）或簡(jiǎn)單對(duì)象（如應(yīng)用程序狀態(tài)）進(jìn)行存儲(chǔ)，使用本地和會(huì)話存儲(chǔ)能夠很好地完成，但是在對(duì)瑣碎的關(guān)系數(shù)據(jù)進(jìn)行處理之外，它就力所不及了。而這正是 HTML 5 的“Web SQL Database”API 接口的應(yīng)用所在。

先提個(gè)醒，該文下面的內(nèi)容需要讀者對(duì) JavaScript 和面對(duì)對(duì)象編程（尤其是匿名內(nèi)的內(nèi)部函數(shù)）以及SQL具有很好的理解。

打開鏈接

為了打開一個(gè)連接，我們執(zhí)行以下代碼：

db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000);

以上代碼創(chuàng)建了一個(gè)數(shù)據(jù)庫(kù)對(duì)象 db，名稱是 Todo，版本編號(hào)為0.1。db 還帶有描述信息和大概的大小值。用戶代理（user agent）可使用這個(gè)描述與用戶進(jìn)行交流，說(shuō)明數(shù)據(jù)庫(kù)是用來(lái)做什么的。利用代碼中提供的大小值，用戶代理可以為內(nèi)容留出足夠的存儲(chǔ)。如果需要，這個(gè)大小是可以改變的，所以沒有必要預(yù)先假設(shè)允許用戶使用多少空間。

為了檢測(cè)之前創(chuàng)建的連接是否成功，你可以檢查那個(gè)數(shù)據(jù)庫(kù)對(duì)象是否為null：

if(!db)
       alert("Failed to connect to database.");

絕不可以假設(shè)該連接已經(jīng)成功建立，即使過(guò)去對(duì)于某個(gè)用戶它是成功的。為什么一個(gè)連接會(huì)失敗，存在多個(gè)原因。也許用戶代理出于安全原因拒絕你的訪問(wèn)，也許設(shè)備存儲(chǔ)有限。面對(duì)活躍而快速進(jìn)化的潛在用戶代理，對(duì)用戶的機(jī)器、軟件及其能力作出假設(shè)是非常不明智的行為。比如，當(dāng)用戶使用手持設(shè)備時(shí)，他們可自由處置的數(shù)據(jù)可能只有幾兆字節(jié)。

執(zhí)行查詢

執(zhí)行一個(gè)查詢，你可以使用database.transaction()函數(shù)。該函數(shù)具有單一參數(shù)，負(fù)責(zé)查詢實(shí)際執(zhí)行的函數(shù)。

該函數(shù)（通常是匿名的）具有一個(gè)類型事務(wù)的參數(shù)。

db.transaction( function(tx) {

該事務(wù)具有一個(gè)函數(shù)：executeSql。這個(gè)函數(shù)使用四個(gè)參數(shù)：表示查詢的字符串，插入到查詢中問(wèn)號(hào)所在處的字符串?dāng)?shù)據(jù)（很像 Java 的預(yù)先準(zhǔn)備好的語(yǔ)句），一個(gè)成功時(shí)執(zhí)行的函數(shù)和一個(gè)失敗時(shí)執(zhí)行的函數(shù)。

tx.executeSql("SELECT COUNT(*) FROM ToDo", [], function(result){}, function
(tx, error){});

查詢成功時(shí)

當(dāng)查詢成功執(zhí)行時(shí)，應(yīng)用程序跳轉(zhuǎn)至一個(gè)具有一對(duì)參數(shù)的查詢，一個(gè)是 transaction，另一個(gè)是它搜集的 results。對(duì)于實(shí)際上將你的數(shù)據(jù)傳遞至用戶，這是非常完美的，比如顯示 ToDo 列表。有關(guān)這個(gè)話題后面再講。

查詢失敗時(shí)

當(dāng)查詢沒能執(zhí)行時(shí)執(zhí)行。由于你將 transaction 對(duì)象作為函數(shù)的第一個(gè)參數(shù)進(jìn)行傳遞，當(dāng)出現(xiàn)錯(cuò)誤時(shí)你可以繼續(xù)執(zhí)行查詢。例如，如果是因?yàn)槿鄙俦砀瘢╰able）而查詢無(wú)法運(yùn)行，這是創(chuàng)建一個(gè)表格并在此執(zhí)行該語(yǔ)句的絕佳時(shí)機(jī)。從該函數(shù)的第二個(gè)參數(shù)，你可以獲得有關(guān)該錯(cuò)誤的信息（包括描述）。

示例

假設(shè)我們想要使用上面的例子，想要查詢數(shù)據(jù)庫(kù)中的某個(gè)表格，如果該表格不存在，我們就創(chuàng)建一個(gè)表格。

在這個(gè)示例中，我們將調(diào)用具有一個(gè)函數(shù)參數(shù)的 db.transaction()。這個(gè)參數(shù)中，我們調(diào)用 tx.executeSql()。如果這個(gè)步驟成功，我們不做任何操作（因此是一個(gè)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)部方法，可能有點(diǎn)麻煩，所以你也許想在外部創(chuàng)建一個(gè)調(diào)用 db.transaction() 的函數(shù)。比如，我們可以讓錯(cuò)誤函數(shù)是自包含的，并將其命名為“createToDoTable()”。

插入

為了讓代碼更加簡(jiǎn)潔和安全，Web SQL Database API 允許你為 transaction.executeSql() 函數(shù)提供字符串?dāng)?shù)據(jù)，用以表示調(diào)用的 SQL 語(yǔ)句中的變量。我們使用以下的代碼進(jìn)行演示：

db.transaction( function(tx) { tx.executeSql
("INSERT INTO ToDo (label, timestamp) values(?, ?)", 
[label, new Date().getTime()], null, null); } );

在這個(gè)示例中，第一個(gè)參數(shù)中的兩個(gè)問(wèn)號(hào)將被后面數(shù)組中對(duì)應(yīng)的項(xiàng)替代。第一個(gè)是為該任務(wù)設(shè)置的標(biāo)簽（也許是我們之前在代碼中定義的一個(gè)變量），以及調(diào)用函數(shù)生成的時(shí)間戳。

執(zhí)行該查詢，其結(jié)果與下面語(yǔ)句類似：

INSERT INTO ToDo (label, timestamp) values ("Test", 1265925077487)

對(duì)結(jié)果進(jìn)行處理

成功執(zhí)行的函數(shù)對(duì)結(jié)果對(duì)象包含集合或行。每一列表示一個(gè)結(jié)果。該結(jié)果包含分配給它的一組值，表示該特定結(jié)果的數(shù)據(jù)庫(kù)中的每一列的值。通過(guò)調(diào)用 result.rows.item(i) 可以訪問(wèn)一個(gè)行，其中 i 是你想要查詢的行的指針。想要從一行中選擇一個(gè)值，你可以傳遞給該行一個(gè)數(shù)組格式的字符串指針，它表示你需要查詢的列。例如，如果想要標(biāo)簽（label）列，我們可以調(diào)用 row['label']。

以下代碼使用結(jié)果對(duì)象來(lái)輸出一個(gè)查詢的結(jié)果：

db.transaction( function(tx) { tx.executeSql("SELECT * FROM ToDo", [],
 function(tx, result) { for(var i = 0; i < result.rows.length; i++)
{ document.write(&#39;
&#39; + result.rows.item(i)
[&#39;label&#39;] + &#39;
&#39;); } }, null); } );

結(jié)論

需要注意的是，如果不是絕對(duì)需要的情況，不要使用 Web SQL Database。這不是因?yàn)樗鼈兊募夹g(shù)高高在上，而是因?yàn)樗鼈儠?huì)讓你的代碼更加復(fù)雜。對(duì)于大多數(shù)情況，本地存儲(chǔ)或會(huì)話存儲(chǔ)就能夠完成相應(yīng)的任務(wù)，尤其是你能夠保持對(duì)象狀態(tài)持久化的情況。

正如前面所說(shuō)，通過(guò)這些HTML 5 Web SQL Database API 接口，你可以獲取許多功能。我相信，幾年以后會(huì)出現(xiàn)一些非常優(yōu)秀的、建立在這些 API 之上的應(yīng)用程序。

以上就是HTML 5 Web SQL Database初探的內(nèi)容，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)（m.miracleart.cn）！