WebSQL数据库：HTML5的非标准伴侣

在前端开发的世界中，数据存储一直是一个重要的话题。虽然WebSQL API并不是HTML5规范的一部分，但它作为独立规范，在前端开发中曾扮演重要角色。本文将带你快速了解WebSQL的核心API，以及如何在实际项目中使用它。

核心API

WebSQL提供了一组简单的API与数据库进行交互：

• openDatabase：用于打开已存在的数据库或创建新数据库。如果数据库不存在，会自动创建。
• transaction：允许我们控制事务，可以在事务中执行提交或回滚操作。
• executeSql：用于执行实际的SQL查询。

打开数据库

我们可以通过openDatabase()方法打开或创建数据库。以下是示例代码：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

这个方法接受五个参数：

1. 数据库名称
2. 版本号
3. 描述文本
4. 数据库大小
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 (stuId unique, stuName)');
});

插入数据

在创建表之后，可以向表中插入数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS STU (id unique, name, age)');
    tx.executeSql('INSERT INTO STU (id, name, age) VALUES (1, "张三", 18)');
    tx.executeSql('INSERT INTO STU (id, name, age) VALUES (2, "李四", 20)');
});

使用动态值插入数据

可以使用动态值插入数据，示例如下：

var stuName = "谢杰";
var stuAge = 18;
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS STU (id unique, name, age)');
    tx.executeSql('INSERT INTO STU (id, name, age) VALUES (3, ?, ?)', [stuName, stuAge]);
});

完整参数

executeSql方法的完整语法如下：

executeSql(sqlStatement, arguments, callback, errorCallback);

这个方法接受四个参数：

1. SQL语句
2. 参数（用于替换SQL语句中的问号占位符）
3. 执行SQL语句后的回调
4. 错误回调

注意事项

虽然WebSQL曾是有用工具，但已被W3C废弃，大多数现代浏览器不再支持。因此，如果面试中被问到WebSQL，了解其基本用法和限制就足够了。

结论

WebSQL虽然不是HTML5的一部分，但曾为前端开发提供了一种简单的方式处理客户端数据库操作。随着技术发展，我们有了更多现代化选择，如IndexedDB，但了解WebSQL的历史和基本用法仍然是有价值的。