HTML本身是用于构建网页结构的标记语言，没有内置的数据库操作能力，无法直接运行SQL语句。要实现在HTML相关场景下执行SQL语句，需要结合其他技术栈配合实现，常见的实现方式分为前端本地存储和前后端协同两种大类。
前端本地运行SQL语句的方法
如果仅需要在浏览器本地存储和操作数据，不需要和服务器数据库交互，可以使用Web SQL或者IndexedDB配合类SQL语法实现，不过Web SQL已经被W3C废弃，目前更推荐使用IndexedDB，或者使用第三方封装库简化操作。
使用Web SQL执行SQL语句
Web SQL提供了类似SQL的语法操作浏览器本地数据库，不过仅部分浏览器支持，适合简单的本地数据缓存场景。
// 打开本地数据库，参数分别是数据库名、版本号、描述、大小
var db = openDatabase('testDB', '1.0', '测试数据库', 2 * 1024 * 1024);
// 执行SQL语句创建表
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS user (id INTEGER PRIMARY KEY, name TEXT, age INTEGER)');
// 插入数据
tx.executeSql('INSERT INTO user (name, age) VALUES (?, ?)', ['张三', 25]);
// 查询数据
tx.executeSql('SELECT * FROM user', [], function (tx, results) {
var len = results.rows.length;
for (var i = 0; i < len; i++) {
console.log(results.rows.item(i).name, results.rows.item(i).age);
}
});
});
使用sql.js在浏览器端运行SQL
sql.js是SQLite的JavaScript移植版本，可以在浏览器中直接运行SQL语句，操作内存中的数据库，不需要后端支持。
// 引入sql.js库后初始化
initSqlJs().then(function (SQL) {
// 创建数据库实例
var db = new SQL.Database();
// 执行建表SQL
db.run('CREATE TABLE test (id INT, name TEXT)');
// 插入数据
db.run('INSERT INTO test VALUES (1, '测试数据')');
// 查询数据
var result = db.exec('SELECT * FROM test');
console.log(result);
});
前后端协同运行SQL语句的方法
如果需要操作服务器端的数据库，比如MySQL、PostgreSQL等，必须通过HTML结合JavaScript调用后端接口，由后端执行SQL语句后返回结果，这是生产环境最常用的方式。
前端HTML和JavaScript部分
前端通过fetch或者XMLHttpRequest调用后端接口，传递需要执行的SQL相关参数，这里需要注意不能直接把原始SQL暴露给前端，避免SQL注入风险，通常前端只传递操作参数，由后端拼接安全的SQL。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>调用后端执行SQL</title>
</head>
<body>
<button onclick="queryData()">查询用户数据</button>
<div id="result"></div>
<script>
function queryData() {
// 调用后端接口，传递查询参数，而非原始SQL
fetch('/api/queryUser', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
age: 18
})
})
.then(res => res.json())
.then(data => {
document.getElementById('result').innerText = JSON.stringify(data);
});
}
</script>
</body>
</html>
后端PHP示例（处理SQL执行）
后端接收前端参数后，使用预处理语句执行SQL，避免注入风险，这里以PHP操作MySQL为例。
<?php
// 连接数据库
$conn = new mysqli('127.0.0.1', 'root', 'password', 'test_db');
if ($conn->connect_error) {
die('连接失败: ' . $conn->connect_error);
}
// 获取前端传递的参数
$input = json_decode(file_get_contents('php://input'), true);
$age = $input['age'];
// 使用预处理语句执行SQL，避免注入
$stmt = $conn->prepare('SELECT * FROM user WHERE age > ?');
$stmt->bind_param('i', $age);
$stmt->execute();
$result = $stmt->get_result();
$data = [];
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
// 返回JSON结果
header('Content-Type: application/json');
echo json_encode($data);
$stmt->close();
$conn->close();
?>
注意事项
- 绝对不要在前端直接拼接原始SQL发送给后端，否则会产生严重的SQL注入漏洞，所有SQL语句必须在后端通过预处理或者ORM框架执行。
- Web SQL兼容性较差，不建议在生产环境使用，本地存储优先选择IndexedDB或者LocalStorage。
- sql.js操作的是内存数据库，页面刷新后数据会丢失，适合临时数据处理场景，不适合持久化存储。
- 如果是静态HTML页面，没有后端支持，无法实现服务器端数据库的操作，只能使用前端本地存储相关方案。
不同方案对比
| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| Web SQL | 简单本地数据缓存 | 语法接近原生SQL，上手快 | 已被废弃，兼容性差 |
| sql.js | 浏览器端临时数据处理 | 无需后端，支持完整SQL语法 | 数据不持久化，页面刷新丢失 |
| 前后端协同 | 生产环境数据操作 | 支持持久化存储，安全性高 | 需要后端开发，部署成本更高 |
HTMLSQLJavaScriptPHP数据库操作修改时间：2026-07-09 09:00:33