HTML 5 Web SQL数据库核心三叉戟

作者：Eve Cole 更新时间：2025-03-29 22:32:02

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

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

核心方法

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

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

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

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

打开数据库

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

vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024);

上面的openDatabase方法使用了下面五个参数：

1、数据库名（mydb）

2、版本号（1.0）

3、描述（Test DB）

4、数据库大小（2*1024*1024）

5、创建回调

最后一个，即第五个参数创建回调，在创建数据库时会调用它，但即使没有这个参数，一样可以在运行时创建数据库。

执行查询

执行查询使用database.transaction()函数，它只需要一个参数，下面是一个真实的查询语句：

vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024); 
db.transaction(function(tx){ 
tx.executeSql('CREATETABLEIFNOTEXISTSLOGS(idunique,log)'); 
});

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

插入操作

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

vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024); 
db.transaction(function(tx){ 
tx.executeSql('CREATETABLEIFNOTEXISTSLOGS(idunique,log)'); 
tx.executeSql('INSERTINTOLOGS(id,log)VALUES(1,foobar)'); 
tx.executeSql('INSERTINTOLOGS(id,log)VALUES(2,logmsg)'); 
});

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

vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024); 
db.transaction(function(tx){ 
tx.executeSql('CREATETABLEIFNOTEXISTSLOGS(idunique,log)'); 
tx.executeSql('INSERTINTOLOGS 
(id,log)VALUES(?,?'),[e_id,e_log]; 
});

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

读操作

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

vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024); 
db.transaction(function(tx){ 
tx.executeSql('CREATETABLEIFNOTEXISTSLOGS(idunique,log)'); 
tx.executeSql('INSERTINTOLOGS(id,log)VALUES(1,foobar)'); 
tx.executeSql('INSERTINTOLOGS(id,log)VALUES(2,logmsg)'); 
}); 
db.transaction(function(tx){ 
tx.executeSql('SELECT*FROMLOGS',[],function(tx,results){ 
varlen=results.rows.length,i; 
msg=<p>Foundrows:+len+</p>; 
document.querySelector('#status').innerHTML+=msg; 
for(i=0;i<len;i++){ 
alert(results.rows.item(i).log); 
} 
},null); 
});

完整的例子

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

<!DOCTYPEHTML>
<html>
<head>
<scripttype=text/javascript>
vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024); 
varmsg; 
db.transaction(function(tx){ 
tx.executeSql('CREATETABLEIFNOTEXISTSLOGS(idunique,log)'); 
tx.executeSql('INSERTINTOLOGS(id,log)VALUES(1,foobar)'); 
tx.executeSql('INSERTINTOLOGS(id,log)VALUES(2,logmsg)'); 
msg='<p>Logmessagecreatedandrowinserted.</p>'; 
document.querySelector('#status').innerHTML=msg; 
}); 
db.transaction(function(tx){ 
tx.executeSql('SELECT*FROMLOGS',[],function(tx,results){ 
varlen=results.rows.length,i; 
msg=<p>Foundrows:+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>
<divid=statusname=status>StatusMessage</div>
</body>
</html>

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

Logmessagecreatedandrowinserted. 
Foundrows:2 
foobar 
logmsg