发布于 由admin

JS `SQLite` in Browser (`sql.js`)：浏览器端关系型数据库

各位靓仔靓女们，今天咱们来聊点刺激的——如何在你的浏览器里玩转关系型数据库！没错，就是那个你熟悉的SQL，但这次它是在你的浏览器里跑，是不是感觉有点赛博朋克？

开场白：SQL.js，你的浏览器里的数据库小精灵

想象一下，你有一个需要大量结构化数据存储和查询的Web应用，但你又不想依赖服务器，或者想让你的应用拥有离线能力。这时候，sql.js就如同阿拉丁神灯里的精灵，嗖的一下，给你变出一个数据库来。

sql.js是一个用JavaScript编译的SQLite数据库。简单来说，它就是把SQLite这个著名的关系型数据库引擎，用Emscripten编译成了JavaScript代码。这意味着你可以在任何支持JavaScript的浏览器环境中使用它，而无需任何服务器端的支持。

第一部分：快速上手，让数据库飞起来

咱们先来个最简单的例子，让你感受一下sql.js的魅力。

  1. 引入sql.js

    首先，你需要引入sql.js库。你可以从CDN或者npm下载它。这里我们使用CDN的方式：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.9.0/sql-wasm.js" integrity="sha512-wmn0DHwr933eXm9JWRfjfUv9xT1IqkLwb6aWjEa4t3yPcmg+1J02wzR9j15K+04sWz7jY8h8m+V26u/V+F0+4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    注意：一定要引入sql-wasm.js而不是sql.js，因为它包含了WebAssembly代码，性能更好。

  2. 初始化数据库

    接下来，在你的JavaScript代码中，初始化数据库：

    // 使用默认的加载方法
const SQL = await initSqlJs({
   locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.9.0/${file}`
});

const db = new SQL.Database();

    这里使用了initSqlJs函数来加载WebAssembly模块。 locateFile函数是告诉sql.js去哪里找到其他的依赖文件。

  3. 创建表并插入数据

    现在，我们可以用SQL语句来创建表，并插入一些数据：

    db.run(`
   CREATE TABLE employees (
       id INTEGER PRIMARY KEY,
       name TEXT,
       age INTEGER,
       department TEXT
   );
`);

db.run(`
   INSERT INTO employees (name, age, department) VALUES
       ('Alice', 30, 'Sales'),
       ('Bob', 25, 'Marketing'),
       ('Charlie', 35, 'Engineering');
`);

  4. 查询数据

    最后，让我们查询一下数据：

    const result = db.exec("SELECT * FROM employees WHERE age > 28");

// 结果是一个数组，包含一个对象，对象包含列名和值
console.log(result);

// 打印结果
result[0].values.forEach(row => {
   console.log(`ID: ${row[0]}, Name: ${row[1]}, Age: ${row[2]}, Department: ${row[3]}`);
});

    运行这段代码，你会在控制台看到查询结果。是不是很简单？

第二部分：深入探索，玩转高级技巧

光会简单的CRUD怎么行？咱们要玩点更高级的。

  1. 预编译语句（Prepared Statements）

    预编译语句可以提高执行效率，尤其是在需要多次执行相同SQL语句时。

    const stmt = db.prepare("SELECT * FROM employees WHERE department = :dept");

stmt.bind({':dept': 'Sales'});
const result1 = stmt.getAsObject();
console.log(result1); // {id: 1, name: "Alice", age: 30, department: "Sales"}

stmt.bind({':dept': 'Marketing'});
const result2 = stmt.getAsObject();
console.log(result2); // {id: 2, name: "Bob", age: 25, department: "Marketing"}

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

    这里，我们先准备好SQL语句，然后通过bind方法绑定参数，最后执行查询。用完之后记得free掉，养成良好的内存管理习惯。

  2. 事务（Transactions）

    事务可以确保一组操作的原子性，要么全部成功，要么全部失败。

    db.run("BEGIN TRANSACTION");
try {
   db.run("INSERT INTO employees (name, age, department) VALUES ('David', 40, 'Finance')");
   db.run("UPDATE employees SET age = 31 WHERE name = 'Alice'");
   db.run("COMMIT");
   console.log("Transaction committed successfully!");
} catch (e) {
   db.run("ROLLBACK");
   console.error("Transaction failed:", e);
}

    这段代码演示了如何使用事务来保证数据的一致性。如果其中任何一个操作失败，整个事务都会回滚。

  3. 导出和导入数据库

    sql.js允许你将数据库导出为二进制数据，并从二进制数据导入数据库。这对于数据的持久化和共享非常有用。

    // 导出数据库
const binaryArray = db.export();

// 将二进制数据保存到文件 (需要FileSaver.js)
// saveAs(new Blob([binaryArray]), "my_database.db");

// 从二进制数据导入数据库
// const newDb = new SQL.Database(binaryArray);

    这段代码演示了如何导出和导入数据库。注意，导出到文件需要用到FileSaver.js库。

  4. 查询结果格式化

    sql.js提供了多种方式来格式化查询结果。

    • exec(): 返回一个数组，包含列名和值。
    • getAsObject(): 返回一个对象，键为列名，值为对应的值。
    • get(): 返回一个数组，包含一行数据的值。

    你可以根据自己的需求选择合适的格式。

第三部分：实战演练，打造你的Web应用

理论学了一堆，不如动手练练。咱们来做一个简单的待办事项应用，使用sql.js来存储待办事项。

  1. HTML结构

    <!DOCTYPE html>
<html>
<head>
   <title>Todo List</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <h1>Todo List</h1>
   <input type="text" id="new-task" placeholder="Add new task">
   <button id="add-button">Add</button>
   <ul id="task-list"></ul>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.9.0/sql-wasm.js" integrity="sha512-wmn0DHwr933eXm9JWRfjfUv9xT1IqkLwb6aWjEa4t3yPcmg+1J02wzR9j15K+04sWz7jY8h8m+V26u/V+F0+4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="script.js"></script>
</body>
</html>

  2. CSS样式（style.css）

    body {
   font-family: sans-serif;
}

#task-list {
   list-style: none;
   padding: 0;
}

#task-list li {
   padding: 10px;
   border-bottom: 1px solid #eee;
}

  3. JavaScript代码（script.js）

    // 初始化sql.js
const initSqlJsPromise = initSqlJs({
   locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.9.0/${file}`
});

let db;

initSqlJsPromise.then(SQL => {
   // 初始化数据库
   db = new SQL.Database();

   // 创建表
   db.run(`
       CREATE TABLE IF NOT EXISTS todos (
           id INTEGER PRIMARY KEY AUTOINCREMENT,
           task TEXT,
           completed INTEGER DEFAULT 0
       );
   `);

   // 加载现有任务
   loadTasks();

   // 添加任务
   const addButton = document.getElementById('add-button');
   addButton.addEventListener('click', addTask);

   // 事件委托处理完成状态切换
   const taskList = document.getElementById('task-list');
   taskList.addEventListener('click', toggleComplete);

   function addTask() {
       const newTaskInput = document.getElementById('new-task');
       const task = newTaskInput.value.trim();

       if (task !== '') {
           // 插入新任务
           const stmt = db.prepare("INSERT INTO todos (task) VALUES (:task)");
           stmt.bind({':task': task});
           stmt.run();
           stmt.free();

           newTaskInput.value = '';

           // 重新加载任务
           loadTasks();
       }
   }

   function toggleComplete(event) {
       if (event.target.tagName === 'LI') {
           const taskId = event.target.dataset.id;
           const completed = event.target.dataset.completed === '1' ? 0 : 1;

           // 更新完成状态
           const stmt = db.prepare("UPDATE todos SET completed = :completed WHERE id = :id");
           stmt.bind({':completed': completed, ':id': taskId});
           stmt.run();
           stmt.free();

           // 重新加载任务
           loadTasks();
       }
   }

   function loadTasks() {
       const taskList = document.getElementById('task-list');
       taskList.innerHTML = ''; // 清空列表

       // 查询所有任务
       const result = db.exec("SELECT * FROM todos");

       if (result.length > 0) {
           const tasks = result[0].values;

           tasks.forEach(task => {
               const id = task[0];
               const taskText = task[1];
               const completed = task[2];

               const li = document.createElement('li');
               li.textContent = taskText;
               li.dataset.id = id;
               li.dataset.completed = completed;
               if (completed === 1) {
                   li.classList.add('completed');
               }
               taskList.appendChild(li);
           });
       }
   }
});

    这个简单的应用可以让你添加、标记完成和查看待办事项。所有数据都存储在浏览器里的SQLite数据库中。

第四部分：性能优化，让你的应用飞起来

sql.js虽然方便，但毕竟是在浏览器里跑，性能肯定不如服务器端的数据库。所以，我们需要一些优化技巧。

  1. 使用WebAssembly

    确保你引入的是sql-wasm.js文件，它包含了WebAssembly代码，性能比纯JavaScript代码更好。

  2. 预编译语句

    对于需要多次执行的SQL语句，使用预编译语句可以显著提高性能。

  3. 批量操作

    尽量避免频繁的数据库操作。可以将多个操作合并成一个事务，或者使用批量插入/更新。

  4. 索引

    对于经常需要查询的字段，可以创建索引来提高查询速度。

    db.run("CREATE INDEX idx_department ON employees (department)");

  5. 合理设计数据库结构

    一个良好的数据库结构可以提高查询效率，减少数据冗余。

第五部分：常见问题与解决方案

  1. sql.js加载失败

    • 确保你引入的是sql-wasm.js文件，而不是sql.js。
    • 检查你的网络连接是否正常。
    • 尝试清除浏览器缓存。

  2. SQL语句错误

    • 仔细检查你的SQL语句是否有语法错误。
    • 使用try...catch语句捕获错误，并打印错误信息。

  3. 性能问题

    • 参考前面的性能优化技巧。
    • 使用浏览器的开发者工具来分析性能瓶颈。

总结：SQL.js，开启无限可能

sql.js为Web应用带来了无限可能。它可以让你在浏览器端存储和查询结构化数据，实现离线应用、客户端缓存、数据分析等功能。虽然性能不如服务器端的数据库，但通过一些优化技巧，你也可以打造出高性能的Web应用。

希望今天的分享对你有所帮助。记住，编程的乐趣在于不断探索和尝试。去吧，骚年，用sql.js创造你的奇迹！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注