让 SQLite 在浏览器中跑起来：用 WebAssembly 实现跨平台的数据库操作

不用依赖后端数据库服务器，在浏览器中就能直接操作 SQLite 数据库，你觉得可能吗？是不是有点不可思议？其实，借助 WebAssembly（Wasm）技术，SQLite 已经可以在浏览器中完美运行了。不需要配置服务器、不需要网络连接，只要你能访问网页，就能开始操作数据库。而且性能还不错！

现在，我想带你深入了解一下，SQLite 是如何通过 WebAssembly 实现浏览器内数据库操作的。我们会一起看看它的优势、适用场景，还有一些实际操作的小贴士。

为什么要让数据库跑在浏览器里？

先聊聊为什么 SQLite 和 WebAssembly 这么“般配”。你可能知道，SQLite 是一种轻量级的嵌入式数据库，它的设计初衷就是为了在资源受限的环境中高效工作。而 WebAssembly 呢，它是一个让我们可以把接近原生性能的代码在浏览器里跑起来的工具。把这两个结合起来，可以让我们实现跨平台的数据库操作——不管你在什么设备上，只要有浏览器，就能用 SQLite。

这么说可能还比较抽象，换个例子来说吧。你是不是有时候在用某些应用时，不想为了一个简单的功能还得访问服务器？比如，离线保存一些数据，或者快速处理大量的本地数据。这时候，SQLite+Wasm 就特别有用，它允许你在客户端直接处理这些事情，不用担心网络延迟或服务器负担。

这么做的主要优势：本地数据处理更高效

1. 1. 完全离线操作 这是 WebAssembly 上运行 SQLite 最明显的优势。你可以在没有网络的情况下直接操作数据库，比如处理本地的数据存储、缓存内容，甚至进行复杂的查询。想象一下，你在开发一款离线网页应用，用户没有网络也能照常使用。你完全不需要担心网络连接问题，因为所有数据都在本地操作。

2. 2. 性能出色 如果你曾经尝试过在浏览器中使用 JavaScript 来处理大量数据，你可能会遇到性能瓶颈。而 WebAssembly 不一样，它的运行速度接近原生代码，可以轻松处理大量数据。SQLite 本身就是为嵌入式系统设计的，再加上 WebAssembly 的高效运行环境，性能表现相当不错。

3. 3. 跨平台兼容 不论你是用 Windows、Mac、Linux 还是手机上的 iOS、Android，所有这些平台上的浏览器都可以运行 WebAssembly。这意味着，用 SQLite 和 Wasm 实现的应用可以轻松在各种设备上无缝运行。只要你的应用跑在浏览器里，SQLite 就能正常工作。

那么，在哪里用得上呢？

看到这，你可能已经在想，这个技术能用在哪些实际的场景中？这里我给你列几个常见的使用场景：

• 离线优先的 Web 应用 想象一下，开发一个任务管理工具，用户可以在离线状态下添加、修改任务。当用户联网时，这些更改可以同步到服务器。SQLite 在本地保存数据，用户完全不受网络波动的影响。 • 数据分析工具 如果你的网页应用需要处理大量数据，比如本地的大规模 CSV 文件解析，用 SQLite 就能大大提升效率。用户可以将数据直接加载到浏览器中，用 SQL 查询进行数据分析，甚至不需要网络。 • 游戏存档 对于那些在浏览器中运行的小游戏来说，存档和进度保存是很重要的功能。传统的方式是将这些数据存在服务器上，但如果玩家离线呢？SQLite 可以帮你把这些数据暂时存储在本地，等到玩家重新联网时再同步。

实战操作：如何在浏览器中运行 SQLite？

有个库，目前已经 12k star 了，地址在此：

https://github.com/sql-js/sql.js

说了这么多，该看看实际操作了。让 SQLite 跑在浏览器里，其实也没你想象得那么复杂。官方已经给我们提供了非常友好的接口，我们可以像操作普通 JavaScript 库一样，操作 SQLite 数据库。下面我们来看看一些基础代码，教你如何上手：

import SQLiteESMFactory from 'wa-sqlite/dist/wa-sqlite.mjs';
  import * as SQLite from 'wa-sqlite';

  async function hello() {
    const module = await SQLiteESMFactory();
    const sqlite3 = SQLite.Factory(module);
    const db = await sqlite3.open_v2('myDB');
    await sqlite3.exec(db, `SELECT 'Hello, world!'`, (row, columns) => {
      console.log(row);
    });
    await sqlite3.close(db);
  }

  hello();

这个例子展示了如何在浏览器中创建一个 SQLite 数据库、并进行查询操作。你会发现，这跟我们平时使用 SQLite 的方式几乎没有差别，只不过这次它是在浏览器里运行的。

一些建议

1. 1. 结合 IndexedDB 存储持久化数据 SQLite 在浏览器中运行时，默认是把数据库存在内存中的，所以一旦你关闭浏览器，数据就会丢失。为了让数据持久化，可以把 SQLite 和浏览器的 IndexedDB 结合起来。SQLite 可以把数据备份到 IndexedDB 中，这样即使用户关闭了浏览器，数据也能保存下来。

2. 2. 注意内存占用 由于浏览器的内存限制，不建议把特别大的数据库全部加载到内存中。如果你的数据量比较大，可以考虑分批处理，或者通过分页的方式进行查询操作。

3. 3. 安全性考虑 虽然 SQLite 运行在本地，但你依然需要考虑数据的安全性。对于敏感数据，可以考虑加密存储，确保即使本地数据被获取，也无法直接被读取。

一些思考

SQLite 和 WebAssembly 的结合让我们看到了全新的可能性，特别是在需要离线支持和本地数据处理的应用场景中。对于开发者来说，这不仅提升了性能，还能让应用具备更高的灵活性。如果你还没尝试过这个组合，不妨亲自体验一下，看看它能为你的项目带来什么样的改变。