小说网,天蚕土豆,有声读物

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

HTML5WebSQLDatabase初探

【譯文】在《從零開(kāi)始構(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接口，利用這些接口，開(kāi)發(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ì)象持久化。

10年積累的做網(wǎng)站、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有臨澧免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

對(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具有很好的理解。

打開(kāi)鏈接

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

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

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

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

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

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

執(zhí)行查詢(xún)

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

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

 
 
 
  
  
  db.transaction( function(tx) {

該事務(wù)具有一個(gè)函數(shù)：executeSql。這個(gè)函數(shù)使用四個(gè)參數(shù)：表示查詢(xún)的字符串，插入到查詢(xún)中問(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){});

查詢(xún)成功時(shí)

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

查詢(xún)失敗失敗時(shí)

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

示例

假設(shè)我們想要使用上面的例子，想要查詢(xún)數(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)建查詢(xún)。

 
 
 
  
  
  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í)行該查詢(xún)，其結(jié)果與下面語(yǔ)句類(lèi)似：

 
 
 
  
  
  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 是你想要查詢(xún)的行的指針。想要從一行中選擇一個(gè)值，你可以傳遞給該行一個(gè)數(shù)組格式的字符串指針，它表示你需要查詢(xún)的列。例如，如果想要標(biāo)簽（label）列，我們可以調(diào)用 row['label']。

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

 
 
 
  
  
  db.transaction( function(tx) { tx.executeSql("SELECT * FROM ToDo", [],    
  
   function(tx, result) { for(var i = 0; i < result.rows.length; i++)     
  
  { document.write('' + result.rows.item(i)['label'] + ''); } }, 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)用程序。

網(wǎng)站名稱(chēng)：HTML5WebSQLDatabase初探
新聞來(lái)源：http://fisionsoft.com.cn/article/dpidohc.html

新聞中心

其他資訊