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);
这个方法接受五个参数：
- 数据库名称
- 版本号
- 描述文本
- 数据库大小
- 创建回调（在数据库创建后调用）
执行操作
使用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);
这个方法接受四个参数：
- SQL语句
- 参数（用于替换SQL语句中的问号占位符）
- 执行SQL语句后的回调
- 错误回调
注意事项
虽然WebSQL曾是有用工具，但已被W3C废弃，大多数现代浏览器不再支持。因此，如果面试中被问到WebSQL，了解其基本用法和限制就足够了。
结论
WebSQL虽然不是HTML5的一部分，但曾为前端开发提供了一种简单的方式处理客户端数据库操作。随着技术发展，我们有了更多现代化选择，如IndexedDB，但了解WebSQL的历史和基本用法仍然是有价值的。