Web SQL 数据库 API 实际上并不是 HTML 规范的一部分，但它是一个单独的规范，它引入了一组 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);
上述方法取了以下五个参数 -
- 数据库名称
- 版本号
- 文字说明
- 数据库的大小
- 创建回调
最后一个和第 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 的表。
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 是外部变量，executeSql 将数组参数中的每个项目映射到 “？”s.
READ 操作
为了读取已经存在的记录，我们使用回调来捕获结果，如下所示 -
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文档中，如下所示，并尝试使用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>
当我们运行上述代码时，它将生成一个由网页上显示的文本组成的输出。
