JS `Web SQL Database` (废弃) 与 `IndexedDB` 对比：浏览器端数据库演进

各位观众老爷，大家好！今天咱们来聊聊浏览器端数据库的那些事儿。

想当年，Web SQL Database 也算风光一时，但无奈命运多舛，早早就被“判了死刑”。如今，扛起大旗的，就剩下 IndexedDB 这么一棵独苗了。

所以，今天咱们就来好好扒一扒 Web SQL Database（虽已废弃）和 IndexedDB 之间的爱恨情仇，看看浏览器的数据库到底经历了怎样的演变。

咱们的目标是：用最通俗易懂的语言，把这些技术概念讲清楚，让大家都能听得明白，学得会用。

(一) Web SQL Database：昙花一现的“关系户”

首先，咱们来认识一下 Web SQL Database。顾名思义，它就是一套跑在浏览器里的关系型数据库。它使用 SQL 作为查询语言，这对于熟悉传统数据库的开发者来说，上手非常容易。

1. 它的“身世”

Web SQL Database 曾经是 W3C 的一个规范草案，但在 2010 年就被宣布停止维护了。原因是啥？因为当时只有少数浏览器（主要是 WebKit 内核的浏览器，比如 Chrome 和 Safari）实现了它，而其他浏览器厂商（比如 Mozilla 和 Microsoft）则更倾向于 IndexedDB。这就导致了事实上的标准分裂。

2. 它的“魅力”

Web SQL Database 最大的优点就是简单易用。如果你熟悉 SQL，那就可以直接上手。它提供了一套标准的 SQL 接口，可以进行增删改查等操作。

3. 代码示例

下面是一个简单的 Web SQL Database 的示例：

// 打开数据库
var db = openDatabase('mydb', '1.0', 'My Database', 2 * 1024 * 1024);

// 创建表
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY, name TEXT, price REAL)');
});

// 插入数据
db.transaction(function (tx) {
  tx.executeSql('INSERT INTO items (name, price) VALUES (?, ?)', ['Apple', 1.0]);
  tx.executeSql('INSERT INTO items (name, price) VALUES (?, ?)', ['Banana', 0.5]);
});

// 查询数据
db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM items', [], function (tx, results) {
    var len = results.rows.length, i;
    console.log("items table: " + len + " rows found.");
    for (i = 0; i < len; i++){
      console.log(results.rows.item(i).name + ", " + results.rows.item(i).price);
    }
  }, null);
});

这段代码做了以下几件事：

打开一个名为 mydb 的数据库。
创建一个名为 items 的表，包含 id、name 和 price 三个字段。
插入两条数据：Apple 和 Banana。
查询 items 表中的所有数据，并打印到控制台。

是不是很简单？这就是 Web SQL Database 的魅力所在。

4. 它的“缺陷”

虽然 Web SQL Database 简单易用，但它也有一些致命的缺陷：

标准分裂： 前面已经说了，只有少数浏览器支持它，导致了事实上的标准分裂。
缺乏标准化： Web SQL Database 并没有一个完整的、标准的 SQL 实现。不同的浏览器可能对 SQL 语法的支持程度不同。
同步 API： Web SQL Database 使用的是同步 API，这意味着在执行数据库操作时，会阻塞主线程，导致页面卡顿。这在现代 Web 应用中是不可接受的。
安全性问题： SQL 注入攻击是 Web SQL Database 最大的安全隐患。如果不小心处理用户输入，就可能被恶意攻击者利用。

5. 它的“结局”

由于以上种种原因，Web SQL Database 最终被 W3C 放弃了。现在，除了少数旧版本的浏览器，已经很少有浏览器支持它了。

(二) IndexedDB：异步非阻塞的“实力派”

接下来，咱们来认识一下 IndexedDB。它是浏览器端一个强大的、事务型的 NoSQL 数据库。

1. 它的“身世”

IndexedDB 是 W3C 的一个正式标准，得到了所有主流浏览器的支持。它是 Web SQL Database 的替代品，旨在解决 Web SQL Database 的一些问题。

2. 它的“特性”

IndexedDB 有以下几个重要的特性：

NoSQL： IndexedDB 是一个 NoSQL 数据库，它不使用 SQL 作为查询语言。而是使用 JavaScript API 来进行数据操作。
异步 API： IndexedDB 使用的是异步 API，这意味着在执行数据库操作时，不会阻塞主线程。这可以保证页面的流畅性。
事务支持： IndexedDB 支持事务，这意味着可以保证数据的一致性。事务可以确保一系列操作要么全部成功，要么全部失败。
大容量存储： IndexedDB 可以存储大量的数据，远大于 Cookie 和 localStorage。
索引支持： IndexedDB 支持索引，可以提高查询效率。
安全性： IndexedDB 采用同源策略，可以防止跨域访问。

3. 代码示例

下面是一个简单的 IndexedDB 的示例：

// 打开数据库
var request = indexedDB.open('mydb', 1);

// 数据库打开成功的回调
request.onsuccess = function(event) {
  db = event.target.result;
  console.log("Database opened successfully");
};

// 数据库打开失败的回调
request.onerror = function(event) {
  console.error("Database open failed:", event);
};

// 数据库需要升级的回调
request.onupgradeneeded = function(event) {
  db = event.target.result;

  // 创建对象仓库（类似于表）
  var objectStore = db.createObjectStore("items", { keyPath: "id", autoIncrement:true });

  // 创建索引
  objectStore.createIndex("name", "name", { unique: false });
  objectStore.createIndex("price", "price", { unique: false });
};

// 添加数据
function addData(name, price) {
  var transaction = db.transaction(["items"], "readwrite");
  var objectStore = transaction.objectStore("items");
  var request = objectStore.add({ name: name, price: price });

  request.onsuccess = function(event) {
    console.log("Data added successfully");
  };

  request.onerror = function(event) {
    console.error("Data add failed:", event);
  };
}

// 查询数据
function getData(name) {
  var transaction = db.transaction(["items"], "readonly");
  var objectStore = transaction.objectStore("items");
  var index = objectStore.index("name");
  var request = index.get(name);

  request.onsuccess = function(event) {
    var result = event.target.result;
    if (result) {
      console.log("Data found:", result);
    } else {
      console.log("Data not found");
    }
  };

  request.onerror = function(event) {
    console.error("Data get failed:", event);
  };
}

// 删除数据
function deleteData(id) {
  var transaction = db.transaction(["items"], "readwrite");
  var objectStore = transaction.objectStore("items");
  var request = objectStore.delete(id);

  request.onsuccess = function(event) {
    console.log("Data deleted successfully");
  };

  request.onerror = function(event) {
    console.error("Data delete failed:", event);
  };
}

// 现在我们可以调用函数来添加、查询和删除数据了
// 确保数据库已经打开，即 `db` 变量已经被赋值
// 比如，在 `request.onsuccess` 回调中调用这些函数

// 示例：
// addData("Apple", 1.0);
// getData("Apple");
// deleteData(1);

这段代码做了以下几件事：

打开一个名为 mydb 的数据库（如果不存在则创建）。
创建一个名为 items 的对象仓库（类似于表），并定义 id 作为主键，且自动递增。
创建两个索引：name 和 price。
定义了 addData、getData 和 deleteData 三个函数，分别用于添加、查询和删除数据。

4. 它的“挑战”

虽然 IndexedDB 解决了 Web SQL Database 的一些问题，但它也有一些挑战：

API 复杂： IndexedDB 的 API 相对复杂，需要一定的学习成本。
异步编程： IndexedDB 使用的是异步 API，需要使用回调函数或 Promise 来处理结果。这对于不熟悉异步编程的开发者来说，可能会比较困难。
NoSQL： 对于熟悉 SQL 的开发者来说，需要学习 NoSQL 的概念和操作方式。

(三) Web SQL Database vs. IndexedDB：对比分析

下面，咱们用一个表格来对比一下 Web SQL Database 和 IndexedDB：

特性	Web SQL Database	IndexedDB
数据模型	关系型 (SQL)	NoSQL
API	同步	异步
标准化	事实标准 (已废弃)	W3C 标准
事务支持	支持	支持
查询语言	SQL	JavaScript API
浏览器支持	少数浏览器 (已废弃)	所有主流浏览器
性能	阻塞主线程	非阻塞主线程
安全性	存在 SQL 注入风险	同源策略
易用性	SQL 熟悉者易上手	API 相对复杂

(四) 浏览器端数据库的演进：总结与展望

从 Web SQL Database 到 IndexedDB，浏览器的数据库经历了从“关系户”到“实力派”的转变。

Web SQL Database 曾经凭借着 SQL 的简单易用性，吸引了一批开发者。但由于标准分裂、同步 API 和安全性问题，最终被淘汰。
IndexedDB 作为 Web SQL Database 的替代品，解决了 Web SQL Database 的一些问题。它采用异步 API，支持事务和索引，可以存储大量的数据。虽然 API 相对复杂，但它得到了所有主流浏览器的支持，成为了浏览器端数据库的唯一选择。

未来展望

虽然 IndexedDB 目前是浏览器端数据库的唯一选择，但它并不是完美的。未来，我们可以期待以下发展：

更简单的 API： 简化 IndexedDB 的 API，降低学习成本。
更好的性能： 进一步优化 IndexedDB 的性能，提高数据读写速度。
新的数据模型： 探索新的数据模型，比如图数据库或文档数据库。
与其他 Web API 的集成： 将 IndexedDB 与其他 Web API（比如 Service Worker）更好地集成，提供更强大的功能。

总之，浏览器端数据库的演进是一个不断探索和创新的过程。让我们一起期待未来 Web 数据库的发展，为 Web 应用带来更强大的数据存储能力！

今天的讲座就到这里，谢谢大家！希望大家有所收获，也欢迎大家多多交流，共同进步！

发表回复 取消回复

发表回复取消回复