HTML 5 Web SQL核心三叉戟

Web SQL数据库API实际上未包含在HTML 5规范之中，它是一个独立的规范，它引入了一套使用SQL操作客户端数据库的API。假设你是一名优秀的Web开发人员，那毫无疑问，你对SQL和数据库的相关概念已经很熟悉了，如果你对SQL不熟悉，那在继续阅读本文之前，最好先学习一下SQL相关的教程。

最新版本的Chrome，Safari和Opera浏览器都支持Web SQL数据库。

核心方法

本文将介绍规范中定义的三个核心方法：

1、openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。

2、transaction：这个方法允许我们根据情况控制事务提交或回滚。

3、executeSql：这个方法用于执行真实的SQL查询。

打开数据库

openDatabase方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库，创建并打开数据库的语法如下：

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

上面的openDatabase方法使用了下面五个参数：

1、数据库名（mydb）

2、版本号（1.0）

3、描述（Test DB）

4、数据库大小（2*1024*1024）

5、创建回调

最后一个，即第五个参数“创建回调”，在创建数据库时会调用它，但即使没有这个参数，一样可以在运行时创建数据库。

执行查询

执行查询使用database.transaction()函数，它只需要一个参数，下面是一个真实的查询语句：

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

上面的查询将会在“mydb”数据库中创建一个LOGS表。

插入操作

为了向表中插入新记录，我们在上面的查询语句中添加了一个简单的SQL查询，修改后的语句如下：

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

在插入新记录时，我们还可以传递动态值，如：

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

这里的e_id和e_log是外部变量，executeSql在数组参数中将每个项目映射到“?”。

读操作

如果要读取已经存在的记录，我们使用一个回调捕获结果，代码如下：

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

完整的例子

最后，我们在一个完整的HTML 5文档中展现前面讲述的内容，同时使用浏览器来解析这个HTML 5文档。

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <script type="text/javascript"> 
  5. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  
  6. var msg;  
  7. db.transaction(function (tx) {  
  8.   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');  
  9.   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');  
  10.   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');  
  11.   msg = '<p>Log message created and row inserted.</p>';  
  12.   document.querySelector('#status').innerHTML =  msg;  
  13. });  
  14.  
  15. db.transaction(function (tx) {  
  16.   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {  
  17.    var len = results.rows.length, i;  
  18.    msg = "<p>Found rows: " + len + "</p>";  
  19.    document.querySelector('#status').innerHTML +=  msg;  
  20.    for (i = 0; i < len; i++){  
  21.      msg = "<p><b>" + results.rows.item(i).log + "</b></p>";  
  22.      document.querySelector('#status').innerHTML +=  msg;  
  23.    }  
  24.  }, null);  
  25. });  
  26. </script> 
  27. </head> 
  28. <body> 
  29. <div id="status" name="status">Status Message</div> 
  30. </body> 
  31. </html> 

下面是在最新版本的Safari或Opera浏览器中产生的输出结果。

  1. Log message created and row inserted.  
  2.  
  3. Found rows: 2  
  4.  
  5. foobar  
  6.  
  7. logmsg 
posted @ 2012-04-12 20:07  张长胜  阅读(416)  评论(0)  编辑  收藏  举报