HTML5 Web SQL 数据库
HTML5 Web SQL 数据库中文讲解
关键要点
- 研究表明，Web SQL 数据库是一种客户端存储技术，允许使用 SQL 操作浏览器中的数据库，但它不是 HTML5 标准的一部分，而是一个独立规范。
- 证据显示，Web SQL 基于 SQLite，支持在 Chrome、Safari 和 Opera 等浏览器中运行，但已被 W3C 停止维护，且在 2024 年 4 月（Chromium 124）起从大多数浏览器中移除。
- 它似乎已被 IndexedDB 和 Web Storage 取代，因为 Web SQL 依赖单一的 SQLite 实现，缺乏多样性支持。
- 研究建议，开发者应迁移到 IndexedDB 或其他现代存储方案，以确保长期兼容性。
概述
Web SQL 数据库（Web SQL Database）是一种允许网页在客户端存储和查询数据的 API，通过 SQL 语句操作类似 SQLite 的数据库。它曾被用于开发离线 Web 应用，但由于缺乏多厂商支持（仅基于 SQLite），W3C 在 2010 年 11 月停止对其维护。2024 年 4 月，Chromium 浏览器（如 Chrome 和 Edge）已完全移除 Web SQL 支持，Safari 也在 2019 年（Safari 13）移除。开发者应考虑更现代的替代方案，如 IndexedDB。
Web SQL 数据库的核心方法
Web SQL 提供以下三个核心方法：
- openDatabase：创建或打开数据库对象。
- transaction：控制事务，支持提交或回滚。
- executeSql：执行 SQL 查询。
使用方法与示例
以下是一个简单的 Web SQL 示例，用于创建数据库、表并插入数据：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Web SQL 示例</title>
</head>
<body>
<div id="status">状态信息</div>
<script>
// 检查浏览器支持
if (window.openDatabase) {
// 创建/打开数据库
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, '测试日志']);
document.querySelector('#status').innerHTML = '日志已插入';
});
// 查询数据
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length;
var msg = '<p>找到 ' + len + ' 条记录</p>';
for (var i = 0; i < len; i++) {
msg += '<p>' + results.rows.item(i).log + '</p>';
}
document.querySelector('#status').innerHTML += msg;
});
});
} else {
document.querySelector('#status').innerHTML = '浏览器不支持 Web SQL';
}
</script>
</body>
</html>- 说明：
openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024)创建一个名为mydb的数据库，版本为 1.0，描述为Test DB，大小为 2MB。transaction用于执行事务，确保操作的原子性。executeSql执行 SQL 查询，支持占位符?防止 SQL 注入。
浏览器支持
Web SQL 曾受以下浏览器支持，但现已逐步移除：
| 浏览器 | 支持情况 | 备注 |
|---|---|---|
| Chrome | 支持至 Chromium 123（2024年3月），124 起移除 | 基于 SQLite |
| Safari | 支持至 Safari 12（2018年），Safari 13 移除 | 基于 SQLite |
| Opera | 支持至早期版本 | 推荐使用最新版本 |
| Edge | 支持至 Chromium 123（2024年3月），124 起移除 | 基于 SQLite |
| Firefox | 从未支持 | 推荐使用 IndexedDB |
- 现状：截至 2025 年 7 月 27 日，Web SQL 已被大多数浏览器移除，Firefox 从未支持，推荐使用 IndexedDB 或 Web Storage。
- HTTPS 要求：部分浏览器要求 HTTPS 环境以确保安全。
特性与优缺点
特性：
- 支持复杂的 SQL 查询，适合关系型数据存储。
- 异步 API，适合处理大型数据集。
- 支持事务，确保数据一致性。
优点：
- 熟悉 SQL 的开发者易于上手。
- 支持离线存储，适合离线应用。
- 相比 Cookie，存储容量更大（通常 5MB 每域名）。
缺点：
- 已废弃，浏览器支持逐渐移除。
- 仅基于 SQLite，缺乏多厂商实现。
- 安全性问题：易受 SQL 注入攻击，需使用占位符
?。
安全与隐私注意事项
- SQL 注入：避免直接拼接 SQL 语句，使用
executeSql的占位符功能。 - 数据安全：Web SQL 数据存储在客户端，易受 XSS 攻击，需过滤用户输入。
- 隐私：遵守隐私法规（如 GDPR），明确告知用户数据存储方式。
替代方案
由于 Web SQL 已废弃，推荐以下替代方案：
- IndexedDB：支持更复杂的数据结构，广泛支持，适合现代应用。
- Web Storage：简单键值对存储，适合小型数据。
- Service Workers：结合其他 API，实现离线功能。
学习资源
以下是推荐的中文学习资源：
结论
HTML5 Web SQL 数据库曾是一种强大的客户端存储技术，允许通过 SQL 操作浏览器中的数据库。然而，由于其依赖单一 SQLite 实现，W3C 已停止维护，且主流浏览器已移除支持。开发者应迁移到 IndexedDB 或 Web Storage，以确保应用的长期兼容性和安全性。结合推荐的学习资源，用户可以了解其历史用途并快速过渡到现代替代方案。