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