使用sql.js构建本地持久化数据库：数据未写入.db文件问题排查

我想要搭建一个带有本地持久化数据库的基础网站，目前使用sql.js进行开发，但发现数据被存储到webstorage而非指定的.db文件中。请问是我的代码存在错误，还是sql.js并不适合完成这项工作？

用户提供的代码：

async function initializeDatabase() {
  const sqlPromise = initSqlJs({
    locateFile: () => `src/modules/sql-wasm.wasm`
  });
  
  const dataPromise = fetch("src/db/sql2.db").then(res => res.arrayBuffer());
  const [SQL, buf] = await Promise.all([sqlPromise, dataPromise]);
  
  const db = new SQL.Database(new Uint8Array(buf));
  db.run("CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY, quantity INTEGER)")  
  db.exec("INSERT INTO items (id, quantity) VALUES (32, 34)")

}

问题根源 #

sql.js完全支持本地文件持久化，你的代码问题出在只读取了本地.db文件，但没把修改后的数据写回文件。当前所有数据库操作都在内存里完成，刷新页面后修改全丢；至于数据跑到webstorage，那是额外逻辑导致的，不是sql.js的默认行为。

修复方案 #

要实现持久化到.db文件，得在修改数据库后把内存数据导出并保存。注意：浏览器有安全限制，不能直接读写本地文件系统，得借助File API或IndexedDB来实现。

浏览器环境下的持久化步骤 #

1. 读取现有.db文件（你当前这部分没问题）
2. 执行数据库操作（建表、插入数据等）
3. 导出内存中的数据库二进制数据
4. 将导出的数据保存为本地文件（要么让用户下载，要么用IndexedDB后台存储）

修改后的示例代码：

async function initializeDatabase() {
  const sqlPromise = initSqlJs({
    locateFile: () => `src/modules/sql-wasm.wasm`
  });
  
  // 读取本地db文件，不存在则初始化空数据库
  let buf;
  try {
    const res = await fetch("src/db/sql2.db");
    buf = await res.arrayBuffer();
  } catch (err) {
    buf = new ArrayBuffer(0);
  }
  
  const [SQL] = await Promise.all([sqlPromise]);
  const db = new SQL.Database(new Uint8Array(buf));
  
  // 执行数据库操作
  db.run("CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY, quantity INTEGER)");  
  db.exec("INSERT INTO items (id, quantity) VALUES (32, 34)");

  // 导出修改后的数据库数据
  const data = db.export();
  const blob = new Blob([data], {type: 'application/x-sqlite3'});
  
  // 示例：生成下载链接让用户保存更新后的db文件
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'sql2.db';
  a.click();
  URL.revokeObjectURL(url);
}

额外建议 #

如果不想让用户手动下载保存，可以结合IndexedDB存储导出的二进制数据：每次页面加载时从IndexedDB读取数据初始化数据库，修改后再把新数据写回IndexedDB，实现后台自动持久化。

内容的提问来源于stack exchange，提问作者Trax