查看: 6591|回复: 3

[精华] HTML5之Web SQL数据库研究

[复制链接]
论坛徽章:
63
2010广州亚运会纪念徽章:台球
日期:2010-10-18 12:43:48茶鸡蛋
日期:2013-01-09 10:59:002013年新春福章
日期:2013-02-25 14:51:24奥运会纪念徽章:帆船
日期:2013-04-02 17:07:052013年新春福章
日期:2013-04-08 17:42:48奥运纪念徽章
日期:2013-07-18 13:55:12优秀写手
日期:2013-12-18 09:29:10马上有车
日期:2014-03-20 16:13:24马上有房
日期:2014-03-20 16:14:11马上有钱
日期:2014-03-20 16:14:11
发表于 2010-9-9 22:48 | 显示全部楼层 |阅读模式
【版权声明】:本文属于原创,转载需征得作者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方法将打开一个数据库;如果数据库不存在,此方法将创建一个新数据库。

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


  1. var db = openDatabase('testdb', '1.1', 'Test DB', 2 * 4096 * 4096);
复制代码


上面的方法了使用了五个参数:

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

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

三、执行查询方法

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


  1. var db = openDatabase('testdb', '1.1', 'Test DB', 2 * 4096 * 4096);
  2. db.transaction(function (tx) {  
  3.    tx.executeSql('CREATE TABLE IF NOT EXISTS MYLOGS (id unique, log)');
  4. });
复制代码


上述SQL查询将在testdb数据库中创建一个名为MYLOGS的表。

四、插入操作

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


  1. var db = openDatabase('testdb', '1.1', 'Test DB', 2 * 4096 * 4096);
  2. db.transaction(function (tx) {
  3.    tx.executeSql('CREATE TABLE IF NOT EXISTS MYLOGS (id unique, log)');
  4.    tx.executeSql('INSERT INTO MYLOGS (id, log) VALUES (1, "foobar")');
  5.    tx.executeSql('INSERT INTO MYLOGS (id, log) VALUES (2, "logmsg")');
  6. });
复制代码


我们可以通过动态值创建数据,如下:

  1. var db = openDatabase('testdb', '1.1', 'Test DB', 2 * 4096 * 4096);
  2. db.transaction(function (tx) {  
  3.   tx.executeSql('CREATE TABLE IF NOT EXISTS MYLOGS (id unique, log)');
  4.   tx.executeSql('INSERT INTO MYLOGS
  5.                         (id,log) VALUES (?, ?'), [le_id, le_log];
  6. });
复制代码


这里le_id和le_log是外部变量,executeSQL映射数组的每个项来替换?号。

五、读操作

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


  1. var db = openDatabase('testdb', '1.1', 'Test DB', 2 * 4096 * 4096);
  2. db.transaction(function (tx) {
  3.    tx.executeSql('CREATE TABLE IF NOT EXISTS MYLOGS (id unique, log)');
  4.    tx.executeSql('INSERT INTO MYLOGS (id, log) VALUES (1, "foobar")');
  5.    tx.executeSql('INSERT INTO MYLOGS (id, log) VALUES (2, "logmsg")');
  6. });
  7. db.transaction(function (tx) {
  8.    tx.executeSql('SELECT * FROM MYLOGS', [], 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. });
复制代码


六、最后的实战例子

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


  1. <!DOCTYPE HTML>
  2. <html>
  3.   <head>
  4.     <script type="text/javascript">
  5. var db = openDatabase('testdb', '1.1', 'Test DB', 2 * 4096 * 4096);
  6. var msg;
  7. db.transaction(function (tx) {
  8.   tx.executeSql('CREATE TABLE IF NOT EXISTS MYLOGS (id unique, log)');
  9.   tx.executeSql('INSERT INTO MYLOGS (id, log) VALUES (1, "foobar")');
  10.   tx.executeSql('INSERT INTO MYLOGS (id, log) VALUES (2, "logmsg")');
  11.   msg = '<p>Log message created and row inserted.</p>';
  12.   document.querySelector('#status').innerHTML =  msg;
  13. });

  14. db.transaction(function (tx) {
  15.   tx.executeSql('SELECT * FROM MYLOGS', [], function (tx, results) {
  16.    var len = results.rows.length, i;
  17.    msg = "<p>Found rows: " + len + "</p>";
  18.    document.querySelector('#status').innerHTML +=  msg;
  19.    for (i = 0; i < len; i++){
  20.      msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
  21.      document.querySelector('#status').innerHTML +=  msg;
  22.    }
  23. }, null);
  24. });
  25.     </script>
  26.   </head>
  27.   <body>
  28.     <div id="status" name="status">Status Message</div>
  29.   </body>
  30. </html>
复制代码


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


  1. Log message created and row inserted.

  2. Found rows: 2

  3. foobar

  4. logmsg
复制代码
认证徽章
论坛徽章:
277
马上加薪
日期:2014-02-19 11:55:14马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14马上有车
日期:2014-02-19 11:55:14马上有车
日期:2014-02-18 16:41:112014年新春福章
日期:2014-02-18 16:41:11版主9段
日期:2012-11-25 02:21:03ITPUB年度最佳版主
日期:2014-02-19 10:05:27现任管理团队成员
日期:2011-05-07 01:45:08
发表于 2010-9-10 21:06 | 显示全部楼层
优秀的文章!

使用道具 举报

回复
论坛徽章:
0
发表于 2010-9-28 13:22 | 显示全部楼层
感谢分享!

使用道具 举报

回复
论坛徽章:
0
发表于 2014-3-28 23:34 | 显示全部楼层
哇!学习了!

使用道具 举报

回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

TOP技术积分榜 社区积分榜 徽章 团队 统计 知识索引树 积分竞拍 文本模式 帮助
  ITPUB首页 | ITPUB论坛 | 数据库技术 | 企业信息化 | 开发技术 | 微软技术 | 软件工程与项目管理 | IBM技术园地 | 行业纵向讨论 | IT招聘 | IT文档
  ChinaUnix | ChinaUnix博客 | ChinaUnix论坛
CopyRight 1999-2011 itpub.net All Right Reserved. 北京盛拓优讯信息技术有限公司版权所有 联系我们 
京ICP备09055130号-4  北京市公安局海淀分局网监中心备案编号:11010802021510 广播电视节目制作经营许可证:编号(京)字第1149号
  
快速回复 返回顶部 返回列表