HTML5之Web SQL数据库研究

【版权声明】：本文属于原创，转载需征得作者chszs的同意！

Web SQL数据库API实际上不是HTML5规范的组成部分，而是单独的规范。它通过一套API来操纵客户端的数据库。

假定你是一名优秀的Web开发者，那么无疑你是很清楚SQL及RDBMS的概念的。

Safari、Chrome和Opera等浏览器的最新版都支持Web SQL Database。

一、核心方法

Web SQL数据库有三个核心方法：

1）打开数据库 openDatabase()方法：此方法创建数据库对象，既可以使用已有的数据库，也可以创建新的数据库。

2）事务 transaction()方法：此方法可以用于控制事务处理，执行提交操作或回滚操作。

3）执行SQL命令 executeSql()方法：此方法用于执行SQL查询。

二、打开数据库方法

如果数据库存在的话，OpenDatabase方法将打开一个数据库；如果数据库不存在，此方法将创建一个新数据库。

要创建并打开一个数据库，可使用下面的代码：

CODE:

var db = openDatabase('testdb', '1.1', 'Test DB', 2 * 4096 * 4096);上面的方法了使用了五个参数：

参数1    数据库名称
参数2    版本号
参数3    文字说明
参数4    数据库的大小
参数5    创建回滚

第五个参数，创建回滚，如果数据库已经创建了，将会调用此回滚操作。如果不带此参数，则仍将创建正确版本的数据库。

三、执行查询方法

要执行一个查询，可使用database.transaction()函数。此函数需要一个参数，该参数是一个函数。实际执行的查询服务如下：

CODE:

var db = openDatabase('testdb', '1.1', 'Test DB', 2 * 4096 * 4096);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS MYLOGS (id unique, log)');
});上述SQL查询将在testdb数据库中创建一个名为MYLOGS的表。

四、插入操作

要为表创建一些数据，我们可以在上面的例子继续添加一些语句，如下：

CODE:

var db = openDatabase('testdb', '1.1', 'Test DB', 2 * 4096 * 4096);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS MYLOGS (id unique, log)');
   tx.executeSql('INSERT INTO MYLOGS (id, log) VALUES (1, "foobar")');
   tx.executeSql('INSERT INTO MYLOGS (id, log) VALUES (2, "logmsg")');
});我们可以通过动态值创建数据，如下：

CODE:

var db = openDatabase('testdb', '1.1', 'Test DB', 2 * 4096 * 4096);
db.transaction(function (tx) {  
  tx.executeSql('CREATE TABLE IF NOT EXISTS MYLOGS (id unique, log)');
  tx.executeSql('INSERT INTO MYLOGS
                        (id,log) VALUES (?, ?'), [le_id, le_log];
});这里le_id和le_log是外部变量，executeSQL映射数组的每个项来替换?号。

五、读操作

要阅读现有的记录，我们可使用回调来捕获结果，如下：

CODE:

var db = openDatabase('testdb', '1.1', 'Test DB', 2 * 4096 * 4096);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS MYLOGS (id unique, log)');
   tx.executeSql('INSERT INTO MYLOGS (id, log) VALUES (1, "foobar")');
   tx.executeSql('INSERT INTO MYLOGS (id, log) VALUES (2, "logmsg")');
});
db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM MYLOGS', [], function (tx, results) {
   var len = results.rows.length, i;
   msg = "

Found rows: " + len + "

";
   document.querySelector('#status').innerHTML +=  msg;
   for (i = 0; i < len; i++){
      alert(results.rows.item(i).log );
   }
}, null);
}); 六、最后的实战例子

在最后，我们可以在Safari浏览器下测试以下例子：

CODE:

  
   
var db = openDatabase('testdb', '1.1', 'Test DB', 2 * 4096 * 4096);
var msg;
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS MYLOGS (id unique, log)');
  tx.executeSql('INSERT INTO MYLOGS (id, log) VALUES (1, "foobar")');
  tx.executeSql('INSERT INTO MYLOGS (id, log) VALUES (2, "logmsg")');
  msg = '

Log message created and row inserted.

';
  document.querySelector('#status').innerHTML =  msg;
});

db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM MYLOGS', [], function (tx, results) {
   var len = results.rows.length, i;
   msg = "

Found rows: " + len + "

";
   document.querySelector('#status').innerHTML +=  msg;
   for (i = 0; i < len; i++){
     msg = "

" + results.rows.item(i).log + "

";
     document.querySelector('#status').innerHTML +=  msg;
   }
}, null);
});
   
  
  
   

Status Message

  
在Safari或Opera的最新版本中，以上代码将产生如下结果：

CODE:

Log message created and row inserted.

Found rows: 2

foobar

logmsg

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/10896630/viewspace-680607/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/10896630/viewspace-680607/