找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1438|回复: 0

[分享] HTML 5 Web SQL核心三叉戟

[复制链接]
发表于 2013-3-27 12:58:39 | 显示全部楼层 |阅读模式 来自 中国–广东–湛江
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



评分

参与人数 1金币 +10 收起 理由
猫性男孩 + 10 很给力!

查看全部评分

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

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

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-22 05:00 , Processed in 0.043907 second(s), 9 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表