sql.js安装配置与快速入门指南-优快云博客

sql.js安装配置与快速入门指南

【免费下载链接】sql.js sql.js：这是一种在浏览器中运行SQL的实现，无需服务器支持。它允许开发者在前端执行SQL查询和操作数据库。项目地址: https://gitcode.com/gh_mirrors/sq/sql.js

本文全面介绍了sql.js的安装配置方法和基础使用指南。详细讲解了npm安装与CDN引入两种集成方式，包括具体的安装步骤、配置参数和文件结构说明。同时深入探讨了WASM文件加载机制、初始化配置流程以及常见问题解决方案。文章还提供了创建内存数据库实例的完整示例和基础SQL操作演示，涵盖数据插入、查询、更新、删除等核心功能，帮助开发者快速上手在前端应用中使用完整的SQLite数据库功能。

npm安装与CDN引入方式

在现代前端开发中，sql.js提供了多种灵活的集成方式，让开发者可以根据项目需求选择最适合的安装和引入方法。无论是使用npm进行包管理，还是通过CDN快速引入，都能轻松地在浏览器中运行完整的SQLite数据库功能。

npm安装方式

npm是JavaScript生态系统中最常用的包管理工具，通过npm安装sql.js可以获得完整的类型支持和版本管理能力。

安装步骤

首先，在项目根目录下执行npm安装命令：

npm install sql.js

安装完成后，你可以在Node.js环境或现代前端构建工具中使用sql.js：

// 在Node.js中使用
const initSqlJs = require('sql.js');

// 或者使用ES6模块语法
import initSqlJs from 'sql.js';

// 初始化SQL.js
initSqlJs().then(SQL => {
  const db = new SQL.Database();
  // 执行数据库操作...
});

项目集成配置

对于使用Webpack、Vite等构建工具的项目，需要进行适当的配置以确保WASM文件正确加载：

// webpack.config.js
module.exports = {
  // ...其他配置
  experiments: {
    asyncWebAssembly: true
  }
};

// vite.config.js
export default {
  // ...其他配置
  optimizeDeps: {
    exclude: ['sql.js']
  }
};

文件结构说明

通过npm安装后，项目node_modules目录中包含以下重要文件：

文件路径	描述	用途
`node_modules/sql.js/dist/sql-wasm.js`	主JavaScript文件	包含核心逻辑和WASM加载器
`node_modules/sql.js/dist/sql-wasm.wasm`	WebAssembly二进制文件	SQLite编译后的核心库
`node_modules/sql.js/dist/sql-asm.js`	asm.js版本	兼容旧浏览器的备用方案

CDN引入方式

对于快速原型开发或简单的HTML项目，CDN引入是最便捷的方式。sql.js在多个CDN服务上都有托管。

主要CDN服务商

sql.js支持以下CDN服务：

jsDelivr - 推荐使用，提供最新的版本和稳定的服务
cdnjs - 流行的CDN服务，版本更新及时
unpkg - npm包的CDN服务

基础引入示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SQL.js CDN示例</title>
    <!-- 引入sql.js -->
    <script src="https://cdn.jsdelivr.net/npm/sql.js@1.13.0/dist/sql-wasm.js"></script>
</head>
<body>
    <script>
        // 配置WASM文件加载路径
        const config = {
            locateFile: filename => `https://cdn.jsdelivr.net/npm/sql.js@1.13.0/dist/${filename}`
        };

        // 初始化SQL.js
        initSqlJs(config).then(SQL => {
            const db = new SQL.Database();
            console.log('数据库创建成功！');
            
            // 创建表并插入数据
            db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT, email TEXT);");
            db.run("INSERT INTO users (name, email) VALUES (?, ?)", ['张三', 'zhangsan@example.com']);
            
            // 查询数据
            const result = db.exec("SELECT * FROM users");
            console.log('查询结果:', result);
        }).catch(error => {
            console.error('初始化失败:', error);
        });
    </script>
</body>
</html>

版本选择策略

不同的CDN服务提供不同的版本管理方式：

<!-- 使用特定版本 -->
<script src="https://cdn.jsdelivr.net/npm/sql.js@1.13.0/dist/sql-wasm.js"></script>

<!-- 使用最新主要版本 -->
<script src="https://cdn.jsdelivr.net/npm/sql.js@1/dist/sql-wasm.js"></script>

<!-- 使用最新版本（不推荐生产环境） -->
<script src="https://cdn.jsdelivr.net/npm/sql.js/dist/sql-wasm.js"></script>

两种方式的对比分析

为了帮助开发者做出合适的选择，以下是npm安装和CDN引入的详细对比：

特性	npm安装	CDN引入
版本控制	精确的版本锁定	依赖CDN服务商的版本管理
离线可用	✅ 支持离线开发	❌ 需要网络连接
构建集成	✅ 完美集成构建流程	⚠️ 需要额外配置
加载性能	⚠️ 需要构建优化	✅ CDN加速，加载快
类型支持	✅ 完整的TypeScript支持	❌ 无类型提示
安全性	✅ 依赖包可审计	⚠️ 依赖第三方CDN
适用场景	大型项目、生产环境	原型开发、演示示例

高级配置选项

无论是npm还是CDN方式，都支持丰富的配置选项来优化加载体验：

const config = {
  // 必需：指定WASM文件加载路径
  locateFile: file => `https://cdn.example.com/path/to/${file}`,
  
  // 可选：内存初始化大小（字节）
  initialMemory: 16777216,
  
  // 可选：最大内存大小（字节）
  maximumMemory: 268435456,
  
  // 可选：是否启用调试模式
  print: console.log,
  printErr: console.error,
  
  // 可选：自定义文件系统
  // fs: customFileSystem
};

initSqlJs(config).then(SQL => {
  // 使用配置后的SQL实例
});

环境适配建议

根据不同的运行环境，推荐以下配置策略：

mermaid

常见问题解决

在实际使用中可能会遇到的一些问题及解决方案：

WASM文件加载失败

// 确保locateFile配置正确
locateFile: filename => {
  // 根据实际部署路径调整
  return `/path/to/dist/${filename}`;
}

跨域问题（CDN方式）

<!-- 在HTML中添加跨域属性 -->
<script crossorigin="anonymous" src="..."></script>

内存不足错误

// 增加内存配置
const config = {
  locateFile: /* ... */,
  initialMemory: 33554432, // 32MB
  maximumMemory: 536870912 // 512MB
};

通过合理的安装和配置方式，sql.js能够无缝集成到各种JavaScript项目中，为前端应用提供强大的本地数据库能力。选择适合项目需求的引入方式，可以显著提升开发效率和运行性能。

初始化配置与WASM文件加载

在现代Web开发中，WebAssembly（WASM）技术为浏览器带来了接近原生性能的执行能力。sql.js项目通过Emscripten将SQLite编译为WASM格式，实现了在浏览器中运行完整SQL数据库的能力。本节将深入探讨sql.js的初始化配置机制和WASM文件加载策略。

WASM文件加载机制

sql.js采用异步加载模式来初始化WASM模块，这是现代Web应用的最佳实践。核心的初始化函数initSqlJs接受一个配置对象，其中最重要的配置项是locateFile函数。

const initSqlJs = require('sql.js');
// 或者在浏览器环境中：
// const initSqlJs = window.initSqlJs;

const SQL = await initSqlJs({
  // 必需：指定WASM文件的加载路径
  locateFile: file => `https://your-cdn-domain.com/dist/${file}`
});

配置参数详解

initSqlJs函数接受的配置对象包含以下关键属性：

配置项	类型	必需	描述
`locateFile`	Function	是	用于定位WASM和其他资源文件的函数
`onRuntimeInitialized`	Function	否	WASM运行时初始化完成后的回调函数
`print`	Function	否	自定义日志输出函数
`printErr`	Function	否	自定义错误输出函数

locateFile函数的使用

locateFile函数是WASM加载的核心，它接收文件名作为参数，返回完整的文件URL。这种设计提供了极大的灵活性：

// 示例1：从CDN加载
const config = {
  locateFile: file => `https://cdn.jsdelivr.net/npm/sql.js@1.13.0/dist/${file}`
};

// 示例2：从相对路径加载
const config = {
  locateFile: file => `./assets/sqljs/${file}`
};

// 示例3：根据不同环境动态加载
const config = {
  locateFile: file => {
    if (process.env.NODE_ENV === 'production') {
      return `https://cdn.example.com/sqljs/${file}`;
    } else {
      return `./dist/${file}`;
    }
  }
};

初始化流程解析

sql.js的初始化过程遵循严格的异步流程，确保WASM模块正确加载和初始化：

mermaid

错误处理与重试机制

在实际应用中，WASM文件加载可能会遇到网络问题或其他异常情况。sql.js提供了完善的错误处理机制：

try {
  const SQL = await initSqlJs({
    locateFile: file => `/dist/${file}`
  });
  
  // 成功初始化后的操作
  const db = new SQL.Database();
  console.log('数据库初始化成功');
  
} catch (error) {
  console.error('WASM加载失败:', error);
  
  // 实现重试机制
  const retry = async (attempt = 1) => {
    if (attempt > 3) {
      throw new Error('超过最大重试次数');
    }
    
    try {
      const SQL = await initSqlJs({
        locateFile: file => `/dist/${file}?attempt=${attempt}`
      });
      return SQL;
    } catch (retryError) {
      console.warn(`第${attempt}次重试失败`);
      await new Promise(resolve => setTimeout(resolve, 1000 * attempt));
      return retry(attempt + 1);
    }
  };
  
  const SQL = await retry();
}

性能优化建议

为了获得最佳的加载性能，建议采用以下策略：

CDN加速：使用CDN服务分发WASM文件，减少加载延迟
HTTP/2推送：在支持的服务器上启用HTTP/2服务器推送
缓存策略：设置适当的缓存头，利用浏览器缓存机制
代码分割：仅在需要时加载sql.js模块

// 动态导入示例
const loadSqlJs = async () => {
  if (!window.SQL) {
    const sqlModule = await import('sql.js');
    window.SQL = await sqlModule.default({
      locateFile: file => `https://cdn.example.com/sqljs/${file}`
    });
  }
  return window.SQL;
};

// 使用时动态加载
const executeQuery = async (sql) => {
  const SQL = await loadSqlJs();
  const db = new SQL.Database();
  return db.exec(sql);
};

浏览器兼容性考虑

虽然现代浏览器都支持WASM，但在一些特殊环境下可能需要降级方案：

// 检测WASM支持
const isWasmSupported = () => {
  try {
    if (typeof WebAssembly === 'object' && 
        typeof WebAssembly.instantiate === 'function') {
      const module = new WebAssembly.Module(
        Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00)
      );
      if (module instanceof WebAssembly.Module) {
        return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
      }
    }
  } catch (e) {
    return false;
  }
  return false;
};

// 根据支持情况选择加载方式
const loadSqlJsSafely = async () => {
  if (isWasmSupported()) {
    // 使用WASM版本
    return await initSqlJs({
      locateFile: file => `/dist/${file}`
    });
  } else {
    // 降级到asm.js版本
    console.warn('WASM不支持，使用asm.js版本');
    // 这里需要加载asm.js版本的sql.js
  }
};

通过合理的配置和错误处理，sql.js的WASM加载过程可以变得既健壮又高效，为后续的数据库操作奠定坚实基础。

创建第一个内存数据库实例

现在让我们开始使用sql.js创建第一个内存数据库实例。内存数据库是一种完全在内存中运行的数据库，不需要磁盘存储，非常适合临时数据处理和快速原型开发。

初始化SQL.js库

首先，我们需要初始化SQL.js库。由于sql.js使用WebAssembly技术，需要异步加载：

// 初始化SQL.js配置
const config = {
  locateFile: filename => `https://sql.js.org/dist/${filename}`
};

// 异步初始化SQL.js
initSqlJs(config).then(function(SQL) {
  // 在这里创建数据库实例
  const db = new SQL.Database();
  console.log("内存数据库创建成功！");
});

创建内存数据库实例

创建内存数据库非常简单，只需要实例化SQL.Database类：

// 创建内存数据库实例
const db = new SQL.Database();

// 或者从现有数据库文件创建（可选）
// const db = new SQL.Database(existingDatabaseData);

执行SQL语句创建表

创建数据库后，我们可以执行SQL语句来创建表结构：

// 创建用户表
const createTableSQL = `
CREATE TABLE users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT NOT NULL,
  email TEXT UNIQUE NOT NULL,
  age INTEGER,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
`;

// 执行创建表语句
db.run(createTableSQL);
console.log("用户表创建成功");

插入示例数据

接下来，我们向表中插入一些示例数据：

// 插入多条用户数据
const insertSQL = `
INSERT INTO users (name, email, age) VALUES 
('张三', 'zhangsan@example.com', 25),
('李四', 'lisi@example.com', 30),
('王五', 'wangwu@example.com', 28),
('赵六', 'zhaoliu@example.com', 35);
`;

db.run(insertSQL);
console.log("示例数据插入成功");

查询数据

现在我们可以查询刚刚插入的数据：

// 查询所有用户
const result = db.exec("SELECT * FROM users");
console.log("查询结果:", result);

// 格式化输出查询结果
result.forEach(({columns, values}) => {
  console.log("列名:", columns);
  console.log("数据行:");
  values.forEach(row => console.log(row));
});

使用预处理语句

预处理语句可以提高性能并防止SQL注入：

// 创建预处理语句
const stmt = db.prepare("SELECT * FROM users WHERE age > ?");

// 绑定参数并执行查询
stmt.bind([25]);
console.log("年龄大于25的用户:");

while (stmt.step()) {
  const row = stmt.getAsObject();
  console.log(row);
}

// 释放语句资源
stmt.free();

完整示例代码

以下是创建内存数据库实例的完整示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SQL.js 内存数据库示例</title>
    <script src="https://sql.js.org/dist/sql-wasm.js"></script>
</head>
<body>
    <h1>SQL.js 内存数据库示例</h1>
    <div id="output"></div>

    <script>
        // 配置SQL.js
        const config = {
            locateFile: filename => `https://sql.js.org/dist/${filename}`
        };

        // 输出函数
        function log(message) {
            const output = document.getElementById('output');
            output.innerHTML += `<p>${message}</p>`;
        }

        // 初始化并创建数据库
        initSqlJs(config).then(function(SQL) {
            log("✅ SQL.js 初始化成功");

            // 创建内存数据库
            const db = new SQL.Database();
            log("✅ 内存数据库创建成功");

            // 创建表
            const createTableSQL = `
            CREATE TABLE products (
                id INTEGER PRIMARY KEY AUTOINCREMENT,
                name TEXT NOT NULL,
                price REAL,
                category TEXT,
                stock INTEGER DEFAULT 0
            );
            `;
            db.run(createTableSQL);
            log("✅ 产品表创建成功");

            // 插入数据
            const insertSQL = `
            INSERT INTO products (name, price, category, stock) VALUES 
            ('笔记本电脑', 5999.99, '电子产品', 15),
            ('智能手机', 2999.50, '电子产品', 30),
            ('办公椅', 899.00, '家具', 20),
            ('咖啡机', 1599.00, '家电', 8);
            `;
            db.run(insertSQL);
            log("✅ 示例数据插入成功");

            // 查询数据
            const result = db.exec("SELECT * FROM products WHERE price > 1000");
            log("📊 价格大于1000的产品:");

            result.forEach(({columns, values}) => {
                values.forEach(row => {
                    log(`产品: ${row[1]}, 价格: ¥${row[2]}, 库存: ${row[4]}`);
                });
            });

            // 显示数据库统计信息
            const stats = db.exec("SELECT COUNT(*) as total, AVG(price) as avg_price FROM products");
            log(`📈 统计: 共${stats[0].values[0][0]}个产品，平均价格: ¥${stats[0].values[0][1].toFixed(2)}`);

        }).catch(function(error) {
            log("❌ 错误: " + error.message);
        });
    </script>
</body>
</html>

数据库操作流程图

以下是创建和使用内存数据库的完整流程：

mermaid

内存数据库的特点

特性	描述	优势
零配置	无需安装或配置数据库服务器	快速启动和开发
内存存储	所有数据存储在内存中	极快的读写速度
临时性	关闭页面后数据丢失	适合临时数据处理
轻量级	资源占用少	适合浏览器环境
完整SQL支持	支持标准SQL语法	强大的查询能力

注意事项

内存限制: 浏览器环境中的内存数据库受JavaScript内存限制
数据持久化: 内存数据库数据不会自动保存，需要手动导出
性能考虑: 对于大数据集，建议使用分页查询
错误处理: 始终添加适当的错误处理机制

通过这个简单的示例，你已经成功创建了第一个sql.js内存数据库实例，并学会了基本的数据库操作。内存数据库为前端开发提供了强大的本地数据管理能力，特别适合需要复杂查询功能的Web应用。

基础SQL操作示例演示

sql.js提供了完整的SQLite功能，让开发者能够在浏览器环境中执行各种SQL操作。本节将详细介绍如何使用sql.js进行基础的数据库操作，包括创建表、插入数据、查询数据、更新数据和删除数据等核心功能。

数据库初始化与表创建

首先需要初始化数据库并创建数据表结构：

// 初始化sql.js并创建数据库
initSqlJs({
  locateFile: file => `https://sql.js.org/dist/${file}`
}).then(SQL => {
  const db = new SQL.Database();
  
  // 创建用户表
  const createTableSQL = `
    CREATE TABLE users (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      name TEXT NOT NULL,
      email TEXT UNIQUE,
      age INTEGER,
      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
    );
    
    CREATE TABLE orders (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      user_id INTEGER,
      product_name TEXT,
      price REAL,
      quantity INTEGER,
      FOREIGN KEY (user_id) REFERENCES users (id)
    );
  `;
  
  db.run(createTableSQL);
  console.log("数据库表创建成功");
});

数据插入操作

sql.js支持多种数据插入方式，包括单条插入和批量插入：

// 单条数据插入
const insertUserSQL = "INSERT INTO users (name, email, age) VALUES (?, ?, ?)";
db.run(insertUserSQL, ["张三", "zhangsan@example.com", 25]);
db.run(insertUserSQL, ["李四", "lisi@example.com", 30]);

// 批量数据插入 - 方式1：使用参数数组
const batchInsertSQL = "INSERT INTO users (name, email, age) VALUES (?, ?, ?), (?, ?, ?)";
db.run(batchInsertSQL, ["王五", "wangwu@example.com", 28, "赵六", "zhaoliu@example.com", 35]);

// 批量数据插入 - 方式2：使用命名参数
const namedParamsSQL = "INSERT INTO users (name, email, age) VALUES ($name, $email, $age)";
db.run(namedParamsSQL, { $name: "钱七", $email: "qianqi@example.com", $age: 40 });

// 插入订单数据
const orderSQL = "INSERT INTO orders (user_id, product_name, price, quantity) VALUES (?, ?, ?, ?)";
db.run(orderSQL, [1, "笔记本电脑", 5999.99, 1]);
db.run(orderSQL, [1, "鼠标", 199.50, 2]);
db.run(orderSQL, [2, "键盘", 299.00, 1]);

数据查询操作

sql.js提供了多种查询方式，满足不同的使用场景：

// 简单查询 - 获取所有用户
const allUsers = db.exec("SELECT * FROM users");
console.log("所有用户:", allUsers[0].values);

// 条件查询
const adultUsers = db.exec("SELECT name, email FROM users WHERE age >= 18");
console.log("成年用户:", adultUsers[0].values);

// 使用预处理语句进行查询
const stmt = db.prepare("SELECT * FROM users WHERE age > :minAge");
const result = stmt.getAsObject({ ':minAge': 25 });
console.log("年龄大于25的用户:", result);

// 分页查询
const pageSize = 2;
const page = 1;
const pagedUsers = db.exec(`
  SELECT * FROM users 
  ORDER BY id 
  LIMIT ${pageSize} 
  OFFSET ${(page - 1) * pageSize}
`);
console.log("第1页用户:", pagedUsers[0].values);

// 联表查询
const userOrders = db.exec(`
  SELECT u.name, o.product_name, o.price, o.quantity 
  FROM users u 
  JOIN orders o ON u.id = o.user_id
`);
console.log("用户订单信息:", userOrders[0].values);

数据更新操作

更新操作允许修改现有数据：

// 更新用户年龄
const updateAgeSQL = "UPDATE users SET age = ? WHERE name = ?";
db.run(updateAgeSQL, [26, "张三"]);

// 批量更新
const batchUpdateSQL = "UPDATE users SET age = age + 1 WHERE age < 30";
db.run(batchUpdateSQL);

// 使用命名参数更新
const namedUpdateSQL = "UPDATE users SET email = $newEmail WHERE name = $name";
db.run(namedUpdateSQL, { $newEmail: "new_zhangsan@example.com", $name: "张三" });

// 验证更新结果
const updatedUsers = db.exec("SELECT name, age, email FROM users");
console.log("更新后的用户数据:", updatedUsers[0].values);

数据删除操作

删除操作需要谨慎使用，确保数据安全：

// 删除特定记录
const deleteSQL = "DELETE FROM users WHERE age > ?";
db.run(deleteSQL, [40]);

// 清空表数据（谨慎使用）
// db.run("DELETE FROM users");

// 验证删除结果
const remainingUsers = db.exec("SELECT COUNT(*) as count FROM users");
console.log("剩余用户数量:", remainingUsers[0].values[0][0]);

聚合函数与分组查询

sql.js支持标准的SQL聚合函数：

// 统计用户数量
const userCount = db.exec("SELECT COUNT(*) as total_users FROM users");
console.log("用户总数:", userCount[0].values[0][0]);

// 平均年龄计算
const avgAge = db.exec("SELECT AVG(age) as average_age FROM users");
console.log("平均年龄:", avgAge[0].values[0][0]);

// 分组统计
const ageGroupStats = db.exec(`
  SELECT 
    CASE 
      WHEN age < 20 THEN '青少年'
      WHEN age BETWEEN 20 AND 30 THEN '青年'
      WHEN age BETWEEN 31 AND 40 THEN '中年'
      ELSE '老年'
    END as age_group,
    COUNT(*) as count,
    AVG(age) as avg_age
  FROM users
  GROUP BY age_group
`);
console.log("年龄分组统计:", ageGroupStats[0].values);

事务处理

事务确保数据库操作的原子性：

// 开始事务
db.run("BEGIN TRANSACTION");

try {
  // 执行多个操作
  db.run("INSERT INTO users (name, email, age) VALUES (?, ?, ?)", ["孙八", "sunba@example.com", 22]);
  db.run("INSERT INTO orders (user_id, product_name, price, quantity) VALUES (?, ?, ?, ?)", [3, "显示器", 1299.00, 1]);
  
  // 提交事务
  db.run("COMMIT");
  console.log("事务执行成功");
} catch (error) {
  // 回滚事务
  db.run("ROLLBACK");
  console.error("事务执行失败，已回滚:", error);
}

错误处理与调试

良好的错误处理是数据库操作的重要部分：

try {
  // 尝试执行可能出错的SQL
  const result = db.exec("SELECT * FROM non_existent_table");
} catch (error) {
  console.error("SQL执行错误:", error.message);
}

// 使用预处理语句的错误处理
const stmt = db.prepare("SELECT * FROM users WHERE invalid_column = ?");
try {
  stmt.bind([1]);
  while (stmt.step()) {
    console.log(stmt.get());
  }
} catch (error) {
  console.error("预处理语句错误:", error.message);
} finally {
  stmt.free(); // 确保释放资源
}

性能优化技巧

// 使用预处理语句提高性能
const preparedStmt = db.prepare("INSERT INTO users (name, email, age) VALUES (?, ?, ?)");

// 批量插入数据
const usersData = [
  ["用户1", "user1@example.com", 20],
  ["用户2", "user2@example.com", 25],
  ["用户3", "user3@example.com", 30]
];

usersData.forEach(user => {
  preparedStmt.bind(user);
  preparedStmt.step();
  preparedStmt.reset();
});

preparedStmt.free();

// 使用索引提高查询性能
db.run("CREATE INDEX idx_users_age ON users(age)");
db.run("CREATE INDEX idx_users_email ON users(email)");

// 查询使用索引的情况
const indexedQuery = db.exec("SELECT * FROM users WHERE age > 25");
console.log("索引查询结果:", indexedQuery[0].values.length);

通过以上示例，我们可以看到sql.js提供了完整的SQL操作能力，从基本的CRUD操作到复杂的事务处理和性能优化，都能在浏览器环境中实现。这些基础操作是构建更复杂应用的基础，熟练掌握这些操作对于有效使用sql.js至关重要。

总结

sql.js作为一个强大的前端SQLite解决方案，为浏览器环境提供了完整的数据库操作能力。通过本文的详细讲解，我们了解了sql.js的多种安装方式（npm和CDN）、WASM文件加载机制、内存数据库创建方法以及基础SQL操作。无论是简单的数据存储还是复杂的查询操作，sql.js都能提供出色的性能和完整的功能支持。掌握sql.js的使用对于开发需要本地数据管理能力的Web应用具有重要意义，为构建更复杂、功能更丰富的前端应用奠定了坚实基础。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考