HTML 5 Web SQL核心三叉戟

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

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

核心方法

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

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

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

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

打开数据库

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


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


  1. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  
  2. db.transaction(function (tx) {    
  3.    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');  
  4. }); 

上面的查询将会在“mydb”数据库中创建一个LOGS表。

插入操作

为了向表中插入新记录,我们在上面的查询语句中添加了一个简单的SQL查询,修改后的语句如下:


  1. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  
  2. db.transaction(function (tx) {  
  3.    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');  
  4.    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');  
  5.    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');  
  6. }); 

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


  1. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  
  2. db.transaction(function (tx) {    
  3.   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');  
  4.   tx.executeSql('INSERT INTO LOGS   
  5.                         (id,log) VALUES (?, ?'), [e_id, e_log];  
  6. }); 

这里的e_id和e_log是外部变量,executeSql在数组参数中将每个项目映射到“?”。

读操作

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


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

完整的例子

最后,我们在一个完整的HTML 5文档中展现前面讲述的内容,同时使用浏览器来解析这个HTML 5文档。


  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <script type="text/javascript"> 
  5. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  
  6. var msg;  
  7. db.transaction(function (tx) {  
  8.   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');  
  9.   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');  
  10.   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');  
  11.   msg = '<p>Log message created and row inserted.</p>';  
  12.   document.querySelector('#status').innerHTML =  msg;  
  13. });  
  14.  
  15. db.transaction(function (tx) {  
  16.   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {  
  17.    var len = results.rows.length, i;  
  18.    msg = "<p>Found rows: " + len + "</p>";  
  19.    document.querySelector('#status').innerHTML +=  msg;  
  20.    for (i = 0; i < len; i++){  
  21.      msg = "<p><b>" + results.rows.item(i).log + "</b></p>";  
  22.      document.querySelector('#status').innerHTML +=  msg;  
  23.    }  
  24.  }, null);  
  25. });  
  26. </script> 
  27. </head> 
  28. <body> 
  29. <div id="status" name="status">Status Message</div> 
  30. </body> 
  31. </html> 

下面是在最新版本的Safari或Opera浏览器中产生的输出结果。


  1. Log message created and row inserted.  
  2.  
  3. Found rows: 2  
  4.  
  5. foobar  
  6.  
  7. logmsg 

 

原文链接:http://www.tutorialspoint.com/html5/html5_web_sql.htm

【编辑推荐】

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索数据库
, 方法
, transaction
, tx
, logs
, 一个
executesql
html5 web sql、html5 websql、html5 web sql 被废弃、html5 web sql 的缺点、html5 web sql 数据库,以便于您获取更多的相关知识。

时间: 2024-12-25 04:04:11

HTML 5 Web SQL核心三叉戟的相关文章

Web持久化存储Web SQL、Local Storage、Cookies(常用)

在浏览器客户端记录一些信息,有三种常用的Web数据持久化存储的方式,分别是Web SQL.Local Storage.Cookies. Web SQL 作为html5本地数据库,可通过一套API来操纵客户端的数据库(关系数据库),下面是支持浏览器情况. 鉴于PC浏览器支持情况,我找了淘宝.京东.携程.起点.优酷网站,并没有用Web SQL记录客户端信息.在移动端比较适用,特别是对于Hybrid应用,更是得心应手. 接口: openDatabase transaction executeSql 1

JSP 页面能套用HTML中的WEB sql吗?jsp页面里面放web sql的代码

问题描述 JSP 页面能套用HTML中的WEB sql吗?jsp页面里面放web sql的代码 如题 如题 感觉上是可以的 大神指点 说一下web sql的知识 怎么存取 谢谢 谢谢 解决方案 大致意思:是不是可不可以在 jsp 里写 sql 代码 在 jsp 里可以通过 <% %> 在里面写 java 代码即可: 例: This is my JSP page. <% RecordDao recordDao = new RecordDaoImpl(); List list = new A

Linux高可用(HA)之Heartbeat+Nginx+MySQL+NFS实现WEB+SQL服务高可用

环境说明: node1:ZhongH100.wxjr.com.cn 172.16.6.100 node2:ZhongH101.wxjr.com.cn 172.16.6.101 NFS存储:ZhongH102.wxjr.com.cn 172.16.6.102 VIP:172.16.7.200 node1和node2的主机名.SSH互通 操作系统:都是CentOS 6.6 x86_64 (自己配置好yum源.epel源.关闭SELinux.关闭防火墙) 注意:是[root@ZhongH100 ~]还

html5 web sql database 能建数据库不能建表怎么回事

问题描述 html5 web sql database 能建数据库不能建表怎么回事 html5 web sql database 能建数据库不能建表怎么回事 现在是数据库能建起来 表建不起来 代码如下 <script type="text/javascript"> var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); var msg; db.transaction(function (tx) {

Web设计核心问题2:Web设计进程(1)

web|进程|设计|问题 创建一个好的Web站点极具挑战性,从外观设计到数据库集成,那么多不同的部分都会留下很多犯错误的空间.为了减少Web项目失败的风险,我们需要有一个进程模型来指导开发过程.不幸的是,很多Web设计者采用了一种可能被称为N I K E的开发方法-他们只是做,而很少考虑前景和计划.这种建设网站的过程是不符合方法学的:站点的目标定义得很松散,整个进程依靠的是直觉,没有严格的过程定义而缺乏可预见性.以这种方法开发的站点像植物一样,它们自然地生长,偶尔会变成美丽的花卉,但更多的情况却

Web设计核心问题3:为用户设计(9)

web|设计|问题  3.12 建设可用的站点 可用站点开发的关键在于早期就关注应用程序的用户.记住用户的目标不是使用计算机或访问站点.用户的目标是完成某个任务-购买某个物品或寻找支付账单的中心,投诉等.你应该尽量接触用户,或者倾听.不要掉进了认为你应该直接询问用户的需求或者用户会为你设计站点的圈套.用户不是设计者,他们会提出不合逻辑和不现实的要求.因为这些,你可能会设计实现自己想法的站点,而不考虑用户的需求.然而,以用户为中心的设计的核心是始终记住我们是为用户设计而不是为我们自己设计.回忆以下

web前端初学技能——5大web前端核心技能

前言  Web前端开发所涉及的内容主要包括W3C标准中的结构.行为和表现,那么这三项中我们需要掌握的核心技能是什么呢?看小编来为你揭开谜底的. 1.开发语言 HTML发展历史有二十多年,历经多次版本更新,HTML5和CSS3的出现又是一次革新.有些人认为前端开发要掌握的技能简单,不就是制作网页嘛,其实不然,web前端需要掌握的核心语言xHTML+CSS+JavaScript,JavaScript作为最难的语言之一,许多编程高手也不敢妄自菲薄自封精通.由于JavaScript与html的差异性,以

外媒解读Web安全核心PKI的四大致命问题

Web安全的立足根基在于复杂的PKI部署体系,但实际生活中得到正确部署的比例却非常有限,而且这一切都将随着摩尔定律的滚滚洪流灰飞烟灭. 我个人算是PKI(即公共密钥基础设施)的忠实拥护者.我热爱数学与密码学之美,也热爱它广泛的用途与适用场景. 过去二十多年当中,我曾经为众多私营及上市公司安装过PKI.原先那曾是我个人工作中的重要组成部分,但最近一段时间我发现这已经成了工作的全部内容.企业对于安全的要求已经达到前所未有的高度,而且越来越多的客户要么首次安装自己的PKI.要么打算对现有PKI进行升级

Web设计核心问题3:为用户设计(1)

web|设计|问题   正如在第1章中所讨论的,各个Web站点经常是根据各自特定的哲学观点来进行设计的.有时这种观点是以内容为中心,有时它又是以技术为中心.更经常的是,它是以视觉效果为中心.但是,设计Web站点时的真正重点应该是用户.时刻想着用户,并千方百计地满足他们的要求是以用户为中心的设计的关键.但是理解用户并不是一件很容易的事.虽然所有的用户都有一些共同的能力如记忆力和响应时间,但不同的用户仍然是不同的个体.网站应该为共同的用户进行设计,而不是为个别的新用户或老用户.网站应该能被所有的人所