极客笔记什么是Web SQL
Web SQL数据库是用于存储或管理数据库中数据的网页 页面 。该 API 由 Google Chrome, Opera和 Android浏览器 支持。
Web SQL API不是HTML5规范的一部分，而是一个独立的规范。它包括了一组 API 来操作 客户端数据库 。
开放数据库，事务 是执行 基本方法 。
W3C Web应用正在 2010年11月 制定该规范。由于缺乏独立的实现，该规范无法继续成为推荐。
Mozilla Corporation 是这一标准背后的关键，同时也是 IndexDB 的主要推动者，它是一种备用存储标准。
Web API 不是 HTML5规范的一部分。它是一个 独立 的规范，指定了一套 API 来操作 客户端数据库 。
Web SQL 数据库适用于 最新版本的Safari、Chrome 和 Opera 。
Web SQL的方法:
共有三种方法-
- 打开数据库 - 使用现有数据库创建 数据库 对象，或创建一个新的数据库。
- 事务 - 事务可以控制 事务 ，根据情况 提交 或 回滚 。
- 执行SQL - 用于执行真实的 SQL 查询。
数据库打开
打开数据库 方法会打开数据库，如果数据库已存在。使用以下代码 创建 和 打开数据库 –
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)');
});
以上代码生成了一个名为 LOGS 的表，在数据库 mydb 中。
INSERT操作
要在表中创建条目，我们执行一个 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 在这里是外部变量，并且会执行数组中的每个项。
读取操作
为了读取已经存在的记录，我们使用回调来捕获结果，如下所示 –
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>
上述代码生成以下结果：
Log message created and row inserted.
Found rows: 2
foobar
logmsg