HTML5 - Web SQL数据库( Web SQL Database)
Web SQL数据库API实际上不是HTML5规范的一部分,但它是一个单独的规范,它引入了一组API来使用SQL操作客户端数据库。
我假设你是一个伟大的Web开发人员,如果是这样的话,毫无疑问,你会很清楚SQL和RDBMS的概念。 如果您仍希望与SQL进行会话,则可以查看我们的SQL教程 。
Web SQL数据库可以在最新版本的Safari,Chrome和Opera中使用。
核心方法
我将在本教程中介绍规范中定义的以下三种核心方法 -
openDatabase - 此方法使用现有数据库或创建新数据库来创建数据库对象。
transaction - 此方法使我们能够根据情况控制事务并执行提交或回滚。
executeSql - 此方法用于执行实际的SQL查询。
打开数据库
如果数据库已经存在, openDatabase方法负责打开数据库,如果该数据库已经存在,则该方法将创建该数据库。
要创建和打开数据库,请使用以下代码 -
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
以上方法采用以下五个参数 -
- 数据库名称
- 版本号
- 文字说明
- 数据库的大小
- 创建回调
如果正在创建数据库,则将调用最后一个和第五个参数创建回调。 但是,如果没有此功能,数据库仍在动态创建并正确版本化。
执行查询
要执行查询,请使用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的表。
插入操作
要在表中创建enteries,我们在上面的示例中添加简单的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将数组参数中的每个项映射到“?”。
读操作 (READ Operation)
要读取已有的记录,我们使用回调来捕获结果,如下所示 -
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);
});
最后的例子
最后,让我们将这个示例保存在完整的HTML5文档中,如下所示,并尝试使用Safari浏览器运行它。
<!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>
这将产生以下结果 -
新页面打开