HTML5与数据库API核心规范

发表日期：2010-09-20 文章编辑：王东浏览次数：23 标签：

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

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

　　核心方法

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

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

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

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

　　打开数据库

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

　　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()函数，它只需要一个参数，下面是一个真实的查询语句：

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”数据库中创建一个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")');    
});

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

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在数组参数中将每个项目映射到“?”。

　　读操作

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

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文档中展现前面讲述的内容，同时使用浏览器来解析这个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浏览器中产生的输出结果。

　　Log message created and row inserted.

　　Found rows: 2

　　foobar

　　logmsg

重庆中技互联网信息咨询有限公司
重庆网站建设事业部官方网：www.zjcoo.com
电子商务建站事业部咨询电话：023-67742189
门户网站品牌加盟推广电话：023-67742189
7*24小时服务电话：023-67742189
媒体合作电话：13883323406
投资合作电话：13896068183
QQ及邮件地址：446515345@qq.com

如没特殊注明，文章均为中技互联原创,转载请注明来自www.zjcoo.com