SQL.jsを使って<input type="file">からSQLiteのDBファイルを読み込む方法

sqlite-on-browser.js

// バージョンは適宜書き換える
// 非同期なので適切なタイミングで初期化する
const SQL = await initSqlJs({
  locateFile: (file) =>
    `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.1/${file}`
});

/** <input type="file"> の change イベントハンドラ */
async function onChangeFileInput(event) {
  if (!event.target.files.length) return;

  // ファイルの中身を ArrayBuffer として読み込む
  const arrayBuffer = await event.target.files[0].arrayBuffer();

  // Uint8Array にしてDB処理関数に渡す
  initDB(new Uint8Array(arrayBuffer));
}

/** DBファイルのバイト配列を読み込んで処理する */
function initDB(data) {
  // DBを読み込む
  const db = new SQL.Database(data);
  
  // クエリを実行する (色々な方法があるので詳細はドキュメントを参照)
  const stmt = db.prepare(`何らかのクエリ`);

  // 結果のすべての行を読み込む
  while (stmt.step()) {
    const row = stmt.getAsObject();
    
    // 何らかの行処理
  }
  
  // 元ファイルへブラウザのスクリプトで直接書き込むことはできないが、バイナリを出力して保存させるなどの方法が考えられる
  const dbBinary = db.export();
  
  // ステートメントのメモリを開放する
  stmt.free();
  
  // DBを閉じる
  db.close();
}