HTML5与数据库API核心规范


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



相关阅读:
div+css与xhtml+css是什么意思?
Javascript中的浅拷贝和深拷贝
语义化的网页 XHTML语义化标记
js单行消息滚动代码,可添加无数个
关于Mozilla浏览器不支持innerText的解决办法
Linux下Apache与Tomcat整合的简单方法
img标签中alt和title属性的正确使用
JavaScript 文本域字体大小选择功能
fleaphp rolesNameField bug解决方法
FreeBSD网站平台建设全过程 第五步
php对gzip文件或者字符串解压实例参考
Windows 7与Vista的8大区别
使用Web标准建站第7天:CSS入门
构建简单的Webmail系统
快速导航

Copyright © 2016 phpStudy |