對于HTML 5，也許最為有用的就是它新推出的“Web Storage”（Web 存儲）API。對簡單的關鍵值對（比如應用程序設置）或簡單對象（如應用程序狀態(tài)）進行存儲，使用本地和會話存儲能夠很好地完成，但是在對瑣碎的關系數據進行處理之外，它就力所不及了。而這正是 HTML 5 的“Web SQL Database”API 接口的應用所在。
先提個醒，該文下面的內容需要讀者對 JavaScript 和面對對象編程（尤其是匿名內的內部函數）以及SQL具有很好的理解。
打開鏈接
為了打開一個連接，我們執(zhí)行以下代碼：
db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000);
以上代碼創(chuàng)建了一個數據庫對象 db，名稱是 Todo，版本編號為0.1。db 還帶有描述信息和大概的大小值。用戶代理（user agent）可使用這個描述與用戶進行交流，說明數據庫是用來做什么的。利用代碼中提供的大小值，用戶代理可以為內容留出足夠的存儲。如果需要，這個大小是可以改變的，所以沒有必要預先假設允許用戶使用多少空間。
為了檢測之前創(chuàng)建的連接是否成功，你可以檢查那個數據庫對象是否為null：
if(!db)
alert("Failed to connect to database.");
絕不可以假設該連接已經成功建立，即使過去對于某個用戶它是成功的。為什么一個連接會失敗，存在多個原因。也許用戶代理出于安全原因拒絕你的訪問，也許設備存儲有限。面對活躍而快速進化的潛在用戶代理，對用戶的機器、軟件及其能力作出假設是非常不明智的行為。比如，當用戶使用手持設備時，他們可自由處置的數據可能只有幾兆字節(jié)。
執(zhí)行查詢
執(zhí)行一個查詢，你可以使用database.transaction()函數。該函數具有單一參數，負責查詢實際執(zhí)行的函數。
該函數（通常是匿名的）具有一個類型事務的參數。
db.transaction( function(tx) {
該事務具有一個函數：executeSql。這個函數使用四個參數：表示查詢的字符串，插入到查詢中問號所在處的字符串數據（很像 Java 的預先準備好的語句），一個成功時執(zhí)行的函數和一個失敗時執(zhí)行的函數。
tx.executeSql("SELECT COUNT(*) FROM ToDo", [], function(result){}, function
(tx, error){});
查詢成功時
當查詢成功執(zhí)行時，應用程序跳轉至一個具有一對參數的查詢，一個是 transaction，另一個是它搜集的 results。對于實際上將你的數據傳遞至用戶，這是非常完美的，比如顯示 ToDo 列表。有關這個話題后面再講。
查詢失敗時
當查詢沒能執(zhí)行時執(zhí)行。由于你將 transaction 對象作為函數的第一個參數進行傳遞，當出現錯誤時你可以繼續(xù)執(zhí)行查詢。例如，如果是因為缺少表格（table）而查詢無法運行，這是創(chuàng)建一個表格并在此執(zhí)行該語句的絕佳時機。從該函數的第二個參數，你可以獲得有關該錯誤的信息（包括描述）。
示例
假設我們想要使用上面的例子，想要查詢數據庫中的某個表格，如果該表格不存在，我們就創(chuàng)建一個表格。
在這個示例中，我們將調用具有一個函數參數的 db.transaction()。這個參數中，我們調用 tx.executeSql()。如果這個步驟成功，我們不做任何操作（因此是一個null參數）?；蛘呶覀儗⒃撌聞蘸蛨?zhí)行失敗的函數一起傳遞，并再次調用 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); } ); } );
使用所有這些內部方法，可能有點麻煩，所以你也許想在外部創(chuàng)建一個調用 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); } );
在這個示例中，第一個參數中的兩個問號將被后面數組中對應的項替代。第一個是為該任務設置的標簽（也許是我們之前在代碼中定義的一個變量），以及調用函數生成的時間戳。
執(zhí)行該查詢，其結果與下面語句類似：
INSERT INTO ToDo (label, timestamp) values ("Test", 1265925077487)
對結果進行處理
成功執(zhí)行的函數對結果對象包含集合或行。每一列表示一個結果。該結果包含分配給它的一組值，表示該特定結果的數據庫中的每一列的值。通過調用 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。這不是因為它們的技術高高在上，而是因為它們會讓你的代碼更加復雜。對于大多數情況，本地存儲或會話存儲就能夠完成相應的任務，尤其是你能夠保持對象狀態(tài)持久化的情況。
正如前面所說，通過這些HTML 5 Web SQL Database API 接口，你可以獲取許多功能。我相信，幾年以后會出現一些非常優(yōu)秀的、建立在這些 API 之上的應用程序。
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業(yè)用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。