HTML5與數(shù)據(jù)庫API核心規(guī)范

發(fā)表日期：2010-09-20 文章編輯：王東瀏覽次數(shù)：23 標(biāo)簽：

Web SQL數(shù)據(jù)庫API實際上未包含在HTML 5規(guī)范之中，它是一個獨立的規(guī)范，它引入了一套使用SQL操作客戶端數(shù)據(jù)庫的API。假設(shè)你是一名優(yōu)秀的Web開發(fā)人員，那毫無疑問，你對SQL和數(shù)據(jù)庫的相關(guān)概念已經(jīng)很熟悉了，如果你對SQL不熟悉，那在繼續(xù)閱讀本文之前，最好先學(xué)習(xí)一下SQL相關(guān)的教程。

　　最新版本的Chrome，Safari和Opera瀏覽器都支持Web SQL數(shù)據(jù)庫。

　　核心方法

　　本文將介紹規(guī)范中定義的三個核心方法：

　　1、openDatabase：這個方法使用現(xiàn)有數(shù)據(jù)庫或創(chuàng)建新數(shù)據(jù)庫創(chuàng)建數(shù)據(jù)庫對象。

　　2、transaction：這個方法允許我們根據(jù)情況控制事務(wù)提交或回滾。

　　3、executeSql：這個方法用于執(zhí)行真實的SQL查詢。

　　打開數(shù)據(jù)庫

　　openDatabase方法打開一個已經(jīng)存在的數(shù)據(jù)庫，如果數(shù)據(jù)庫不存在，它還可以創(chuàng)建數(shù)據(jù)庫，創(chuàng)建并打開數(shù)據(jù)庫的語法如下：

　　var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

　　上面的openDatabase方法使用了下面五個參數(shù)：

　　1、數(shù)據(jù)庫名(mydb)

　　2、版本號(1.0)

　　3、描述(Test DB)

　　4、數(shù)據(jù)庫大小(2*1024*1024)

　　5、創(chuàng)建回調(diào)

　　最后一個，即第五個參數(shù)“創(chuàng)建回調(diào)”，在創(chuàng)建數(shù)據(jù)庫時會調(diào)用它，但即使沒有這個參數(shù)，一樣可以在運行時創(chuàng)建數(shù)據(jù)庫。

　　執(zhí)行查詢

　　執(zhí)行查詢使用database.transaction()函數(shù)，它只需要一個參數(shù)，下面是一個真實的查詢語句：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);    
db.transaction(function (tx) {      
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');    
});

　　上面的查詢將會在“mydb”數(shù)據(jù)庫中創(chuàng)建一個LOGS表。

　　插入操作

　　為了向表中插入新記錄，我們在上面的查詢語句中添加了一個簡單的SQL查詢，修改后的語句如下：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);    
db.transaction(function (tx) {    
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');    
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');    
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');    
});

　　在插入新記錄時，我們還可以傳遞動態(tài)值，如：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);    
db.transaction(function (tx) {      
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');    
  tx.executeSql('INSERT INTO LOGS     
                        (id,log) VALUES (?, ?'), [e_id, e_log];    
});

　　這里的e_id和e_log是外部變量，executeSql在數(shù)組參數(shù)中將每個項目映射到“?”。

　　讀操作

　　如果要讀取已經(jīng)存在的記錄，我們使用一個回調(diào)捕獲結(jié)果，代碼如下：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);    
db.transaction(function (tx) {    
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');    
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');    
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');    
});    
db.transaction(function (tx) {    
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {    
   var len = results.rows.length, i;    
   msg = "<p>Found rows: " + len + "</p>";    
   document.querySelector('#status').innerHTML +=  msg;    
   for (i = 0; i < len; i++){    
      alert(results.rows.item(i).log );    
   }    
 }, null);    
});

　　完整的例子

　　最后，我們在一個完整的HTML 5文檔中展現(xiàn)前面講述的內(nèi)容，同時使用瀏覽器來解析這個HTML 5文檔。

<!DOCTYPE HTML>   
<html>   
<head>   
<script type="text/javascript">   
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);    
var msg;    
db.transaction(function (tx) {    
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');    
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');    
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');    
  msg = '<p>Log message created and row inserted.</p>';    
  document.querySelector('#status').innerHTML =  msg;    
});    
   
db.transaction(function (tx) {    
  tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {    
   var len = results.rows.length, i;    
   msg = "<p>Found rows: " + len + "</p>";    
   document.querySelector('#status').innerHTML +=  msg;    
   for (i = 0; i < len; i++){    
     msg = "<p><b>" + results.rows.item(i).log + "</b></p>";    
     document.querySelector('#status').innerHTML +=  msg;    
   }    
 }, null);    
});    
</script>   
</head>   
<body>   
<div id="status" name="status">Status Message</div>   
</body>   
</html>

　　下面是在最新版本的Safari或Opera瀏覽器中產(chǎn)生的輸出結(jié)果。

　　Log message created and row inserted.

　　Found rows: 2

　　foobar

　　logmsg

重慶中技互聯(lián)網(wǎng)信息咨詢有限公司
重慶網(wǎng)站建設(shè)事業(yè)部官方網(wǎng)：www.tmsmall666.cn
電子商務(wù)建站事業(yè)部咨詢電話：023-67742189
門戶網(wǎng)站品牌加盟推廣電話：023-67742189
7*24小時服務(wù)電話：023-67742189
媒體合作電話：13883323406
投資合作電話：13896068183
QQ及郵件地址：446515345@qq.com

如沒特殊注明，文章均為中技互聯(lián)原創(chuàng),轉(zhuǎn)載請注明來自www.tmsmall666.cn