无网络无服务器的浏览器端本地文件CRUD方案咨询

方案1：JavaScript + IndexedDB + JSON文件导入导出（轻量化首选） #

完全匹配你的需求，纯前端运行、无需服务器/网络，支持将数据导出为本地JSON文件备份，同时用IndexedDB做浏览器内的持久存储（不会随普通缓存清除丢失，容量远大于LocalStorage，支持事务操作）。

核心逻辑 #

• 日常CRUD操作直接读写IndexedDB，数据存在浏览器的持久化存储中
• 提供「导出数据」按钮：将IndexedDB中的员工数据序列化为JSON，通过浏览器Blob API生成可下载的database.json文件（对应你要的database.db）
• 提供「导入数据」按钮：读取本地的database.json文件，解析后写入IndexedDB恢复数据

文件结构 #

├── index.html
├── style.css
├── script.js
└── database.json （用户手动保存/导入的本地数据文件）

关键代码示例 #

导出数据

function exportDatabase() {
  // 从IndexedDB读取所有员工数据（假设已封装好读取逻辑）
  getAllEmployees().then(employees => {
    const jsonStr = JSON.stringify(employees, null, 2);
    const blob = new Blob([jsonStr], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'database.json';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  });
}

导入数据

function importDatabase(input) {
  const file = input.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = (e) => {
    try {
      const employees = JSON.parse(e.target.result);
      // 将数据写入IndexedDB（假设已封装好写入逻辑）
      bulkSaveEmployees(employees).then(() => {
        alert('数据导入成功');
      });
    } catch (err) {
      alert('导入失败：文件格式错误');
    }
  };
  reader.readAsText(file);
}

方案2：JavaScript + sql.js（支持SQL查询，适合结构化数据） #

如果需要更复杂的数据查询（多条件筛选、关联查询等），可以用sql.js——纯JavaScript实现的SQLite引擎，完全在浏览器内运行，无需服务器或额外软件安装，支持将数据库导出为标准的database.db文件。

核心逻辑 #

• 用sql.js在浏览器内创建SQLite数据库，执行CRUD的SQL语句
• 提供「导出数据库」功能：将内存中的SQLite数据库导出为database.db文件保存到本地
• 提供「导入数据库」功能：读取本地的database.db文件，加载到浏览器内存中继续操作

文件结构 #

├── index.html
├── style.css
├── script.js
├── sql-wasm.js （sql.js核心文件，可下载到本地）
├── sql-wasm.wasm
└── database.db （用户手动保存/导入的本地SQLite文件）

关键代码示例 #

初始化数据库并导出

// 加载sql.js
initSqlJs({ locateFile: filename => `./${filename}` }).then(SQL => {
  // 初始化数据库（导入本地文件时替换为读取逻辑）
  const db = new SQL.Database();
  db.run("CREATE TABLE IF NOT EXISTS employees (id INTEGER PRIMARY KEY, name TEXT, position TEXT)");

  // 导出数据库为本地文件
  function exportDB() {
    const data = db.export();
    const blob = new Blob([data], { type: 'application/x-sqlite3' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'database.db';
    a.click();
    URL.revokeObjectURL(url);
  }

  // 导入本地数据库文件
  function importDB(input) {
    const file = input.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (e) => {
      const uInt8Array = new Uint8Array(e.target.result);
      const importedDB = new SQL.Database(uInt8Array);
      // 替换当前数据库实例
      db.close();
      db = importedDB;
      alert('数据库导入成功');
    };
    reader.readAsArrayBuffer(file);
  }
});

方案对比 #

注意事项 #

• 两种方案都不需要管理员权限，所有操作均在浏览器内完成
• 数据导出/导入需用户手动触发（浏览器安全限制，无法自动读写本地文件）
• IndexedDB数据不会随普通缓存清除丢失，但用户卸载浏览器或清除全部数据时会丢失——定期导出本地文件备份很有必要

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