以下演示了如何在浏览器中启动并运行 sqlite31，只需几个简单的步骤。为了简单起见，本教程将演示在网页的所谓主线程中加载 sqlite3 JavaScript/WebAssembly (WASM) 模块。从 worker 中使用该模块只需要稍微多一点的努力，将在以后的教程中介绍，以及如何使用各种持久存储选项。
在我们开始之前，请注意此处演示的方法的以下限制
- 此演示使用“原生”JavaScript，无需任何第三方工具要求。使用 npm 则在单独页面中介绍。
- 数据库是瞬态的 - 当页面重新加载时，它们会消失。 持久化它们是可能的，但这超出了本简短教程的范围。
- 数据库大小限制完全取决于浏览器和设备。该库没有可靠的方法来查询这些限制。
- 广泛不鼓励将浏览器的主线程（也称为“UI 线程”）用于长时间运行的操作，因为在 JS 代码运行时 UI 无法呈现。虽然对相对较小的数据库进行简单的数据库操作应该不会造成任何可用性问题，但通常更倾向于从 Worker 加载和运行 sqlite3，以便长时间运行的查询不会干扰 UI 呈现。该库提供了多种不同的方法来做到这一点。
步骤 1：创建 HTML
在最基本的情况下，我们需要加载主要sqlite3.js和使用它的客户端应用程序的 HTML 支架。例如
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello, sqlite3</title>
</head>
<body>
<script src="jswasm/sqlite3.js"></script>
<script src="demo-123.js"></script>
</body>
</html>
查看demo-123.html，它具有更丰富的功能。
步骤 2：创建 JS 应用程序
HTML 已经完成，我们需要我们的 JavaScript 应用程序。最基本的部分是加载库的 WASM 编译形式，以及初始化其 JavaScript 绑定。所有这些都通过sqlite3.js导出的例程执行
window.sqlite3InitModule().then(function(sqlite3){
// The module is now loaded and the sqlite3 namespace
// object was passed to this function.
console.log("sqlite3:", sqlite3);
});
查看demo-123.js，它是一个“功能齐全”的示例，展示了高级 sqlite3 JS API。
sqlite3InitModule()函数是 sqlite3 WASM 模块加载器导出的唯一全局符号，并且在任何应用程序中只能调用一次。应用程序有责任将sqlite3对象存储在应用程序方便的位置。最简单的情况
globalThis.sqlite3 = sqlite3;
将它安装为全局符号2，但在大多数项目中都不鼓励使用全局作用域。
请注意，在缓慢的连接上，下载 WASM 文件（由sqlite3InitModule()触发的步骤）可能需要一些时间，在此期间，演示将看起来处于非活动状态。应用程序可以添加额外的 HTML、CSS 和 JS 部分以接收有关加载状态的通知，以便例如，UI 可以显示“正在加载...”动画或报告任何错误。这样做需要熟悉Emscripten提供的 JS/WASM 支架，但这超出了本演示的范围。在sqlite3 fiddle 应用程序的底部提供了一个示例。
步骤 3：Web 服务器
有了 HTML 和 JS，我们需要一个 Web 服务器来运行它们。由于安全限制，浏览器可能会拒绝加载通过file:// URL 提供的服务的 WASM。由于 Web 服务器在很大程度上取决于个人喜好，并且有很多可用的选项，因此在这里运行该部分超出了范围。
简而言之，我们需要以下文件在某个任意 Web 服务器上的同一目录中
- demo-123.html
- demo-123.js
sqlite3.js包含 WASM 模块加载器和 sqlite3 JS API。sqlite3.wasm是核心 sqlite3 库的编译为 WASM 的构建。
Web 服务器启动并运行后，我们只需要将浏览器指向演示文件的位置即可