HTML 5 Web SQL數據庫核心三叉戟

作者：Eve Cole 更新時間：2025-03-29 22:32:02

Web SQL數據庫API實際上未包含在HTML 5規範之中，它是一個獨立的規範，它引入了一套使用SQL操作客戶端數據庫的API。假設你是一名優秀的Web開發人員，那毫無疑問，你對SQL和數據庫的相關概念已經很熟悉了，如果你對SQL不熟悉，那在繼續閱讀，本文之前，最好先學習一下SQL相關的教程。

最新版本的Chrome，Safari和Opera等瀏覽器都支持Web SQL數據庫。

核心方法

本文將介紹規範中定義的三個核心方法：

1、openDatabase：這個方法使用現有數據庫或創建新數據庫創建數據庫對象。

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

3、executeSql：這個方法用於執行真實的SQL查詢。

打開數據庫

openDatabase方法打開一個已經存在的數據庫，如果數據庫不存在，它還可以創建數據庫，創建並打開數據庫的語法如下：

 vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024);

上面的openDatabase方法使用了下面五個參數：

1、數據庫名（mydb）

2、版本號（1.0）

3、描述（Test DB）

4、數據庫大小（2*1024*1024）

5、創建回調

最後一個，即第五個參數創建回調，在創建數據庫時會調用它，但即使沒有這個參數，一樣可以在運行時創建數據庫。

執行查詢

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

 vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024);
 db.transaction(function(tx){
 tx.executeSql('CREATETABLEIFNOTEXISTSLOGS(idunique,log)');
 });

上面的查詢將會在mydb數據庫中創建一個LOGS表。

插入操作

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

 vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024);
 db.transaction(function(tx){
 tx.executeSql('CREATETABLEIFNOTEXISTSLOGS(idunique,log)');
 tx.executeSql('INSERTINTOLOGS(id,log)VALUES(1,foobar)');
 tx.executeSql('INSERTINTOLOGS(id,log)VALUES(2,logmsg)');
 });

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

 vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024);
 db.transaction(function(tx){
 tx.executeSql('CREATETABLEIFNOTEXISTSLOGS(idunique,log)');
 tx.executeSql('INSERTINTOLOGS
 (id,log)VALUES(?,?'),[e_id,e_log];
 });

這裡的e_id和e_log是外部變量，executeSql在數組參數中將每個項目映射到?。

讀操作

如果要讀取已經存在的記錄，我們使用一個回調捕獲結果，代碼如下：

 vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024);
 db.transaction(function(tx){
 tx.executeSql('CREATETABLEIFNOTEXISTSLOGS(idunique,log)');
 tx.executeSql('INSERTINTOLOGS(id,log)VALUES(1,foobar)');
 tx.executeSql('INSERTINTOLOGS(id,log)VALUES(2,logmsg)');
 });
 db.transaction(function(tx){
 tx.executeSql('SELECT*FROMLOGS',[],function(tx,results){
 varlen=results.rows.length,i;
 msg=<p>Foundrows:+len+</p>;
 document.querySelector('#status').innerHTML+=msg;
 for(i=0;i<len;i++){
 alert(results.rows.item(i).log);
 }
 },null);
 });

完整的例子

最後，我們在一個完整的HTML 5文檔中展現前面講述的內容，同時使用瀏覽器來解析這個HTML 5文檔。

 <!DOCTYPEHTML>
 <html>
 <head>
 <scripttype=text/javascript>
 vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024);
 varmsg;
 db.transaction(function(tx){
 tx.executeSql('CREATETABLEIFNOTEXISTSLOGS(idunique,log)');
 tx.executeSql('INSERTINTOLOGS(id,log)VALUES(1,foobar)');
 tx.executeSql('INSERTINTOLOGS(id,log)VALUES(2,logmsg)');
 msg='<p>Logmessagecreatedandrowinserted.</p>';
 document.querySelector('#status').innerHTML=msg;
 });
 db.transaction(function(tx){
 tx.executeSql('SELECT*FROMLOGS',[],function(tx,results){
 varlen=results.rows.length,i;
 msg=<p>Foundrows:+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>
 <divid=statusname=status>StatusMessage</div>
 </body>
 </html>

下面是在最新版本的Safari或Opera瀏覽器中產生的輸出結果。

 Logmessagecreatedandrowinserted.
 Foundrows:2
 foobar
 logmsg