您的位置:知识库 » Web前端

HTML 5 Web SQL核心三叉戟

来源: 51cto.com  发布时间: 2010-09-19 23:25  阅读: 1612 次  推荐: 1   原文链接   [收藏]  
摘要:HTML 5 Web SQL是一个独立的规范,它引入了一套使用SQL操作客户端数据库的API,本文将介绍规范中定义的三个核心方法。

  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

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

1
0
标签:HTML5 Web SQL

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻