使用sql.js实现前端SQLite数据库操作

更新时间：2024年12月17日 08:49:41 作者：乐闻x

sql.js 是将 SQLite 数据库编译为 JavaScript 的库,允许开发者在浏览器环境中直接操作 SQLite 数据库,本文主要介绍了如何使用sql.js实现多张表的关联操作,需要的可以了解下

前言

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

什么是 sql.js

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

准备工作

在开始之前，我们需要确保先下载 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. 查询数据

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

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数据库操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

离开页面时检测表单元素是否被修改,提示保存的js代码
离开页面时,检测表单元素是否被修改,然后给出提示.防止用户错失修改的机会，提高用户体验。
2010-08-08
详解JavaScript正则表达式之RegExp对象
这篇文章主要介绍了JavaScript正则表达式之RegExp对象，对RegExp对象的基本使用方法，以及各种方法进行整理，感兴趣的小伙伴们可以参考一下
2015-12-12
layui 点击重置按钮, select 并没有被重置的解决方法
今天小编就为大家分享一篇layui 点击重置按钮, select 并没有被重置的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript跨平台的开源框架NativeScript
本文给大家分享的是一款使用javascript来构建跨平台原生移动应用的开源框架--NativeScript，可以使用JavaScript开发跨平台、真正原生的iOS, Android 和 Windows 移动App。开发人员使用NativeScript提供的库来构建应用UI，其抽象了各种原生平台之间的不同。
2015-03-03
layer实现关闭弹出层刷新父界面功能详解
这篇文章主要介绍了layer实现关闭弹出层刷新父界面功能,结合实例形式分析了使用layui的layer在关闭弹出层时刷新父界面的常用实现技巧与相关操作注意事项,需要的朋友可以参考下
2017-11-11
blob文件流前端显示pdf三种方法
这篇文章主要给大家介绍了关于blob文件流前端显示pdf的三种方法,困扰我一个晚上的问题,终于解决了,文中给出了详细的代码示例,需要的朋友可以参考下
2024-04-04
JavaScript如何使用Promise实现分批处理接口请求
当我们在开发时遇到需要同时发起百条接口请求怎么办呢,本文主要来和大家介绍一下JavaScript如何使用Promise实现分批处理接口请求,需要的可以参考下
2024-03-03
JavaScript分步实现一个出生日期的正则表达式
本文把出生日期分割成几个部分，分步地介绍了实现一个出生日期校验的完整过程。对出生日期正则表达式感兴趣的朋友参考下吧
2018-03-03
layui表单验证select下拉框实现验证的方法
今天小编就为大家分享一篇layui表单验证select下拉框实现验证的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript字符串转数字的多种方法总结
在 JavaScript 开发中,我们经常需要将字符串转换为数字,例如从输入框获取用户输入后进行数学计算,JavaScript 提供了多种方法来实现这一功能,如 parseInt、parseFloat、Number 等,本文将详细介绍这些方法的使用方式、适用场景以及可能的坑,需要的朋友可以参考下
2025-03-03