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

snakeshe1010
175 阅读2分钟

在前端开发的世界里，数据存储一直是一个重要的话题。虽然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的历史和基本用法仍然是有价值的。

avatar
文章
阅读
粉丝