网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > html5

实例告诉您HTML5的WEB SQL数据库如何使用?含源码

2021/3/9 22:21:35

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

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文档。

XML/HTML Code 复制内容到剪贴板

<!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浏览器中产生的输出结果。

XML/HTML Code 复制内容到剪贴板

Log message created and row inserted.    

Found rows: 2    

foobar    

logmsg  


相关资讯

  • html5新增元素document.queryselector属性

    document.queryselector其实也不算是html5的新增元素,它只是继承了html4的属性,今天我们就来说说document.queryselector属性如何使用? 先看一个实例,结合实例分析一下:<!DOCTYPE html><html><head> <meta charset="UTF-8"&a…

    2021/5/9 14:06:38
  • html5身份证照片上传及预览缩略图-附源码

    html5页面上传图片很方便,主要用到了html5的FileReader方法,今天我们就通过身份证照片上传作为例子来说说它的用法。调用FileReader对象的方法FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功…

    2021/3/28 10:52:43
  • 用实例告诉你html5画图功能如何使用?附源码

    在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字。在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题…

    2021/3/21 14:51:36
  • HTML5如何实现浏览器页面全屏显示及退出全屏的效果?

    在越来越真实的web应用程序中,JavaScript也变得越来越给力.FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态.在线演示Demo: Fullscreen API Example(在此Demo中,可…

    2021/3/9 22:17:42