HTML5 的 Web SQL 数据库曾是一种用于在浏览器客户端存储数据的技术，但目前已被废弃。尽管如此，了解其基本概念和操作方法仍具有一定的学习价值。以下是关于 Web SQL 数据库的学习笔记。
一、Web SQL 数据库概述
1.1 状态与替代方案
Web SQL API 已被废弃，不再推荐使用。现代浏览器标准更倾向于使用 IndexedDB 来处理客户端存储。尽管 Web SQL 在某些老旧浏览器中仍有支持，但由于其未来不确定性和缺乏广泛支持，建议转向 IndexedDB。
1.2 适用场景
Web SQL 数据库 API 并非 HTML5 规范的一部分，而是一个独立的规范。它引入了一组使用 SQL 操作客户端数据库的 APIs，允许开发者在浏览器中创建和操作数据库。对于熟悉 SQL 的 Web 后端程序员来说，这种技术相对容易理解。
1.3 浏览器支持
Web SQL 数据库可以在最新版的 Safari、Chrome 和 Opera 浏览器中工作，但在其他浏览器中可能不受支持。
二、核心方法
2.1 openDatabase
功能：使用现有的数据库或新建的数据库创建一个数据库对象。
参数：
数据库名称（如
'mydb'）。版本号（如
'1.0'）。描述文本（如
'Test DB'）。数据库大小（如
2 * 1024 * 1024，表示 2MB）。创建回调（可选，创建数据库后被调用）。
示例：
JavaScript复制
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
2.2 transaction
功能：控制一个事务，执行提交或回滚。
示例：
JavaScript复制
db.transaction(function(tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); });
2.3 executeSql
功能：执行实际的 SQL 查询。
示例：
JavaScript复制
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
三、数据库操作示例
3.1 打开数据库
JavaScript复制
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);3.2 创建表
JavaScript复制
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});3.3 插入数据
JavaScript复制
db.transaction(function(tx) {
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});3.4 使用动态值插入数据
JavaScript复制
var e_id = 3;
var e_log = "Hello World";
db.transaction(function(tx) {
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (?, ?)', [e_id, e_log]);
});3.5 读取数据
JavaScript复制
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM LOGS', [], function(tx, results) {
var len = results.rows.length;
for (var i = 0; i < len; i++) {
console.log(results.rows.item(i).log);
}
});
});3.6 删除记录
JavaScript复制
db.transaction(function(tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
});3.7 更新记录
JavaScript复制
db.transaction(function(tx) {
tx.executeSql('UPDATE LOGS SET log="www.w3cschool.cc" WHERE id=2');
});四、完整实例
以下是一个完整的示例，展示了如何创建数据库、插入数据、读取数据、删除数据和更新数据。
HTML复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web SQL 示例</title>
</head>
<body>
<div id="status"></div>
<script>
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, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
msg = '<p>数据表已创建，且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
// 删除记录
db.transaction(function(tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
msg = '<p>删除 id 为 1 的记录。</p>';
document.querySelector('#status').innerHTML += msg;
});
// 更新记录
db.transaction(function(tx) {
tx.executeSql('UPDATE LOGS SET log="www.w3cschool.cc" WHERE id=2');
msg = '<p>更新 id 为 2 的记录。</p>';
document.querySelector('#status').innerHTML += msg;
});
// 查询数据
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM LOGS', [], function(tx, results) {
var len = results.rows.length;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (var i = 0; i < len; i++) {
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
});
});
</script>
</body>
</html>