前端SQLite数据库操作：sql.js实战教程

作者：数据喵时间：2026-11-01 03:58:04浏览：496

本文详细介绍如何利用sql.js在浏览器环境中直接操作SQLite数据库。内容涵盖从环境搭建、数据库初始化，到创建表、插入、查询、更新和删除数据的全流程。重点解析多表关联操作的实现方法，包括联合查询及结果解析，帮助开发者构建无需后端依赖的响应式Web应用。

前言

随着Web应用开发的演进，前端数据处理的角色愈发关键。为了提升结构化数据的管理效率，sql.js提供了一套高效的解决方案。该库将SQLite数据库编译为JavaScript版本，使开发者能够在浏览器端直接执行SQLite操作。本文将深入讲解如何利用sql.js进行多表关联操作，从而增强前端数据处理的灵活性与性能。

什么是sql.js

sql.js是一个基于JavaScript实现的SQLite数据库引擎。SQLite本身具备自包含、无服务器、零配置及事务性支持等特点。简单来说，它允许开发者在浏览器环境中便捷地处理结构化数据。

准备工作

在开始编码前，需先获取sql.js库。可通过以下两种方式进行引入：

通过NPM安装

npm install sql.js

通过CDN引入

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

使用指南

以下部分将展示如何在代码中集成并使用sql.js。

1. 初始化数据库

首先，需要创建一个数据库实例。可通过以下JavaScript代码完成初始化：

const initSqlJs = window.initSqlJs;

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

2. 创建表格

获取数据库实例后，即可开始构建表结构。例如，创建一个包含id和name字段的用户信息表：

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. 插入数据

表结构建立完成后，即可向表中写入数据：

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. 查询数据

数据插入后，可通过SQL语句进行检索。以下代码演示了如何从数据库中读取数据：

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. 更新数据

若需修改现有数据，可执行更新操作。以下代码展示了如何更新用户表中的记录：

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. 删除数据

最后，介绍如何移除数据：

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表建立关联。

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. 插入数据

表结构创建完毕后，向表中写入示例数据：

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联合查询可获取关联表的数据。例如，检索所有用户及其对应的订单信息：

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返回的结果为一个数组，数组内每个元素代表一个查询结果集的对象。需解析该结果以展示数据：

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应用。

到此这篇关于使用sql.js实现前端SQLite数据库操作的文章就介绍到这了,更多相关sql.js实现SQLite数据库操作内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

Node.js实现HTTP请求服务与MySQL数据库操作方法详解

2026-10-25 22:11:23