Web 应用如何使用sqlite？使用 sql.js 实现前端 SQLite 数据库操作

乐闻x2024-12-21 8:50

前言

在 Web 应用开发中，前端数据处理的重要性日益增加。为了实现更高效的前端数据管理，特别是在处理结构化数据时，sql.js 提供了一个出色的解决方案。sql.js 是将 SQLite 数据库编译为 JavaScript 的库，允许开发者在浏览器环境中直接操作 SQLite 数据库。本教程将详细介绍如何使用 sql.js 实现多张表的关联操作，从而提高前端数据处理的灵活性和效率。

什么是 sql.js？

sql.js 是一个用 JavaScript 实现的 SQLite 数据库。SQLite 是一种自包含、无服务器、零配置、事务性 SQL 数据库引擎。简而言之，它提供了一种在浏览器中轻松操作结构化数据的方法。

准备工作

在开始之前，我们需要确保先下载 sql.js。你可以通过以下方式获取：

通过 NPM 安装

clike 复制代码 
npm install sql.js

通过 CDN 引入

clike 复制代码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.1/sql-wasm.js"></script>

使用指南

接下来，我们来看如何在代码中使用 sql.js。

1. 初始化数据库

首先，我们需要创建一个数据库实例。你可以使用一段简单的 JavaScript 代码来完成这一步：

clike 复制代码 
const initSqlJs = window.initSqlJs;

initSqlJs().then(function (SQL) {
  // 创建一个新的数据库
  const db = new SQL.Database();
  
  // 输出数据库对象
  console.log(db);
});

2. 创建表格

有了数据库实例之后，我们就可以开始创建表格了。我们将创建一个简单的用户信息表，包括 id 和 name 两个字段：

clike 复制代码 
initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  
  // 创建一个用户表
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  
  console.log("Table created successfully!");
});

3. 插入数据

表格创建好之后，我们就可以插入一些数据了：

clike 复制代码 
initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");

  // 插入一些数据
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);

  console.log("Data inserted successfully!");
});

4. 查询数据

插入数据后，我们可以查询数据。以下代码展示了如何从数据库中查询数据：

clike 复制代码 
initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);
  
  // 查询数据
  const res = db.exec("SELECT * FROM users");

  // 输出查询结果
  console.log(res);
});

5. 更新数据

有时候我们需要更新已经存在的数据。以下代码展示了如何更新用户表中的数据：

clike 复制代码 
initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);

  // 更新数据
  db.run("UPDATE users SET name = ? WHERE id = ?", ['Charlie', 1]);

  // 查询更新后的数据
  const res = db.exec("SELECT * FROM users");

  console.log(res);
});

6. 删除数据

最后，我们来看如何删除数据：

clike 复制代码 
initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);

  // 删除数据
  db.run("DELETE FROM users WHERE id = ?", [1]);

  // 查询删除后的数据
  const res = db.exec("SELECT * FROM users");

  console.log(res);
});

进阶操作：多张表关联

在实际的应用场景中，通常需要关联多张表来完成更复杂的数据查询和操作。

1. 创建多张表

接下来，我们创建两个表：users 和 orders。users 表存储用户信息，orders 表存储用户的订单信息，并通过 user_id 关联到 users 表。

clike 复制代码 
initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  
  // 创建用户表
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  
  // 创建订单表
  db.run("CREATE TABLE orders (id INTEGER PRIMARY KEY, user_id INTEGER, product TEXT)");
  
  console.log("Tables created successfully!");
});

2. 插入数据

创建好表之后，我们向表中插入一些数据：

clike 复制代码 
initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  db.run("CREATE TABLE orders (id INTEGER PRIMARY KEY, user_id INTEGER, product TEXT)");
  
  // 插入用户数据
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);
  
  // 插入订单数据
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [1, 1, 'Laptop']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [2, 1, 'Phone']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [3, 2, 'Tablet']);
  
  console.log("Data inserted successfully!");
});

3. 查询关联数据

我们可以通过 SQL 联合查询来获取关联表的数据。例如，获取所有用户及其对应的订单信息：

clike 复制代码 
initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  db.run("CREATE TABLE orders (id INTEGER PRIMARY KEY, user_id INTEGER, product TEXT)");
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [1, 1, 'Laptop']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [2, 1, 'Phone']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [3, 2, 'Tablet']);
  
  // 联合查询用户及其订单数据
  const res = db.exec(`
    SELECT users.name AS user_name, orders.product AS product
    FROM users
    JOIN orders ON users.id = orders.user_id
  `);
  
  console.log(res);
});

4. 处理查询结果

db.exec 返回的结果是一个数组，数组中的每个元素是一个对象，代表了查询结果的一个表格。你需要解析这个结果以展示数据：

clike 复制代码 
initSqlJs().then(function (SQL) {
  const db = new SQL.Database();
  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)");
  db.run("CREATE TABLE orders (id INTEGER PRIMARY KEY, user_id INTEGER, product TEXT)");
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [1, 'Alice']);
  db.run("INSERT INTO users (id, name) VALUES (?, ?)", [2, 'Bob']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [1, 1, 'Laptop']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [2, 1, 'Phone']);
  db.run("INSERT INTO orders (id, user_id, product) VALUES (?, ?, ?)", [3, 2, 'Tablet']);
  
  const res = db.exec(`
    SELECT users.name AS user_name, orders.product AS product
    FROM users
    JOIN orders ON users.id = orders.user_id
  `);
  
  // 解析查询结果
  if (res.length > 0) {
    const columns = res[0].columns;
    const values = res[0].values;
    
    values.forEach(row => {
      const record = {};
      row.forEach((value, index) => {
        record[columns[index]] = value;
      });
      console.log(record);  // 输出每一条记录
    });
  }
});

总结

通过 sql.js，我们可以在浏览器中轻松地操作 SQLite 数据库。它提供了一个强大的工具，使我们能够在前端进行复杂的数据操作而无需依赖后端服务器。这意味着我们可以构建更为响应和灵活的Web应用。

相关推荐
布朗克1683 分钟前
25 IO流高级操作——序列化、NIO与Files工具类
java·数据库·io·nio
江米小枣tonylua4 分钟前
真多线程！Bun作者要给JS大手术
前端
阿演6 分钟前
DataDjinn 新版本更新：新增 Oracle 支持，查询窗口、表预览和连接树继续打磨
数据库·oracle·ai编程·数据库连接工具
YIAN23 分钟前
# 从入门到封装：一文搞懂 Fetch API 所有用法（新手友好）
前端·javascript
lixora24 分钟前
Oracle 11g Active Data Guard Go 自动化部署工具 v1.0
数据库·oracle
Nturmoils25 分钟前
自增主键别只会 auto_increment，先把值从哪来讲清楚
数据库·后端
叶小鸡32 分钟前
Java 篇-项目实战-AI 天机学堂(从 0 到 1)-day5
数据库·redis·缓存
Slice_cy35 分钟前
基于node实现服务端内核引擎
前端·后端
往事随风灬1 小时前
我被 Volta 的“智能”坑了一下午：pnpm 为何无视项目 Node 版本？
前端·vue.js
mN9B2uk171 小时前
大数据量高并发的数据库优化
服务器·数据库·oracle
热门推荐
01《置身钉内》原文-可播放阅读02【AI】2026 年具身智能模型和世界模型总结03GitHub 镜像站点04Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析052026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？062026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf07Codex 下载安装指南：Windows 和 macOS 官方版下载08AI科技热点日报 | 2026年6月1日09【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法10CC-Switch 下载、安装与使用配置指南【2026.5.29】