一、關於sql.js
sql.js（https://github.com/kripken/sql.js）通過使用Emscripten編譯SQLite C代碼，將SQLite移植到Webassembly。 它使用存儲在內存中的虛擬數據庫文件，因此不會保留對數據庫所做的更改。 但是，它允許您導入任何現有的sqlite文件，並將創建的數據庫導出為JavaScript類型的數組。
這里沒有C綁定或node-gyp編譯，sql.js是一個簡單的JavaScript文件，可以像任何傳統的JavaScript庫一樣使用。 如果您正在JavaScript中構建本機應用程序（例如，使用Electron），或者在node.js中工作，則您可能更喜歡使用SQLite與JavaScript的本地綁定（https://www.npmjs.com/package/sqlite3）。
SQLite是公共領域，sql.js是MIT許可的。
Sql.js早於WebAssembly，因此從asm.js項目開始。 它仍然支持asm.js以實現向后兼容。
二、為什么要用sql.js
在開發electron應用的時候如果想要使用sqlite3，步驟上除了npm安裝以外還要rebuild，比較麻煩，參見electron官方文檔之使用 Node 原生模塊（https://electronjs.org/docs/tutorial/using-native-node-modules）。
如果你想找一個開箱即用的sql庫，那么sql.js將是個不錯的選擇。sql.js是sqlite的Webassembly版，使用上和sqlite基本沒有區別。sql.js支持瀏覽器端直接引入cdn，或者下載sql-wasm.js和sql-wasm.wasm到本地后引入，也支持npm導入。
三、在Electron項目中安裝sql.js
1、假設我們已經搭建好了Electron的一個hello world項目，如https://xushanxiang.com/2019/11/installing-electron.html
2、安裝sql.js
cnpm install sql.js --save安裝完后，查看目錄結構：
tree node_modules/sql.js -L 2node_modules/sql.js
├── AUTHORS
├── GUI
│ └── index.html
├── LICENSE
├── Makefile
├── README.md
├── cache
│ ├── check.txt
│ ├── extension-functions.c
│ └── sqlite-amalgamation-3280000.zip
├── dist
│ ├── sql-asm-debug.js
│ ├── sql-asm-memory-growth.js
│ ├── sql-asm.js
│ ├── sql-wasm-debug.js
│ ├── sql-wasm-debug.wasm
│ ├── sql-wasm.js
│ ├── sql-wasm.wasm
│ ├── worker.sql-asm-debug.js
│ ├── worker.sql-asm.js
│ ├── worker.sql-wasm-debug.js
│ └── worker.sql-wasm.js
├── examples
│ ├── GUI
│ ├── README.md
│ ├── persistent.html
│ ├── repl.html
│ ├── requireJS.html
│ ├── simple.html
│ └── start_local_server.py
├── index.html
├── out
│ ├── api.js
│ ├── extension-functions.bc
│ ├── sqlite3.bc
│ └── worker.js
├── package.json
├── sqlite-src
│ └── sqlite-amalgamation-3280000
└── src
├── api-data.coffee
├── api.coffee
├── exported_functions.json
├── exported_runtime_methods.json
├── exports.coffee
├── output-post.js
├── output-pre.js
├── shell-post.js
├── shell-pre.js
└── worker.coffee
9 directories, 41 files
dist目錄文件說明詳見 https://github.com/kripken/sql.js#versions-of-sqljs-included-in-the-distributed-artifacts
四、在Electron項目中，如何使用sql.js操作SQLite數據庫
1、創建一個SQLite數據庫
我們可以在命令行中創建，也可以通過在線SQL解釋器（http://kripken.github.io/sql.js/examples/GUI/）創建並下載一個。
寫代碼時，大家可以參考由源代碼中的注釋生成的完整文檔——http://kripken.github.io/sql.js/documentation/#http://kripken.github.io/sql.js/documentation/class/Database.html
我們使用后者下載一個數據庫 sql.db 放到項目根目錄。再看一下我們當前的項目文件結構：
d tree -L 1
.
├── index.html
├── main.js
├── node_modules
├── package.json
└── sql.db
1 directory, 4 files
當然，我們也可以在項目運行時，動態創建一個，不過先創建靜態文件目錄，拷貝相關文件到靜態文件目錄。
→ mkdir -p static/js
→ cp node_modules/sql.js/dist/sql-wasm.* static/js/
→ ls static/js/
sql-wasm.js sql-wasm.wasm再改動 index.html 文件內容：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>create the database</title> </head> <body> <div id="result"></div> <script src='./static/js/sql-wasm.js'></script> <!--如果在主進程中，則用var initSqlJs=require('sql-wasm.js')--> <script> var fs = require("fs"); var config = { // 指定加載sql-wasm.wasm文件的位置 locateFile: filename => `./static/js/${filename}` }; initSqlJs(config).then(SQL => { // 創建數據庫 var db = new SQL.Database(); // 運行查詢而不讀取結果 db.run("CREATE TABLE test (col1, col2);"); // 插入兩行：(1,111) and (2,222) db.run("INSERT INTO test VALUES (?,?), (?,?)", [1,111,2,222]); // 將數據庫導出到包含SQLite數據庫文件的Uint8Array // export() 返回值: ( Uint8Array ) — SQLite3數據庫文件的字節數組 var data = db.export(); // 由於安全性和可用性問題，不建議使用Buffer()和new Buffer()構造函數 // 改用new Buffer.alloc()、Buffer.allocUnsafe()或Buffer.from()構造方法 // var buffer = new Buffer(data); var buffer = Buffer.from(data, 'binary'); // 被創建數據庫名稱 var filename = "d.sqlite"; fs.writeFileSync(filename, buffer); document.querySelector('#result').innerHTML = filename + "Created successfully."; }); </script> </body> </html>
如果你沒有安裝SQLiteStudio之類的軟件，可以把上面動態創建的數據庫文件載入http://kripken.github.io/sql.js/examples/GUI/，再執行下面SQL語句得到下面表格結果。
SELECT * FROM test| col1 | col2 |
|---|---|
| 1 | 111 |
| 2 | 222 |
2、對SQLite數據庫進行查詢操作
替換 index.html 文件內容如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Execute SELECT sql</title> </head> <body> <div id="result"></div> <script src='./static/js/sql-wasm.js'></script> <script> var fs = require("fs"); var filebuffer = fs.readFileSync('d.sqlite'); var config = { // 指定加載sql-wasm.wasm文件的位置 locateFile: filename => `./static/js/${filename}` }; initSqlJs(config).then(SQL => { // 加載數據庫到內存中 var db = new SQL.Database(filebuffer); var res = db.exec("SELECT * FROM test"); // Returns: ( Array<QueryResults> ) — An array of results. console.log(JSON.stringify(res)); // [{"columns":["col1","col2"],"values":[[1,111],[2,222]]}] }); </script> </body> </html>
3、對SQLite數據庫進行增、改、刪操作
替換 index.html 文件內容如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Execute SELECT sql</title> </head> <body> <div id="result"></div> <button onclick="delete_row(3)">刪除id為3的記錄</button> <script src='./static/js/sql-wasm.js'></script> <script> var fs = require("fs"); var filebuffer = fs.readFileSync('d.sqlite'); var db; var config = { // 指定加載sql-wasm.wasm文件的位置 locateFile: filename => `./static/js/${filename}` }; initSqlJs(config).then(SQL => { // 加載數據庫到內存中 db = new SQL.Database(filebuffer); // 插入兩行：(1,111) and (2,222) db.run("INSERT INTO test VALUES (?,?), (?,?)", [3,333,4,444]); var res = db.exec("SELECT * FROM test"); console.log(JSON.stringify(res)); // [{"columns":["col1","col2"],"values":[[1,111],[2,222],[3,333],[4,444]]}] // 修改一行 db.run("UPDATE test SET col2=(?) WHERE col1=(?)", [3333,3]); res = db.exec("SELECT * FROM test"); console.log(JSON.stringify(res)); // [{"columns":["col1","col2"],"values":[[1,111],[2,222],[3,3333],[4,444]]}] // 刪除一行 db.run("DELETE FROM test WHERE col1=(?)", [4]); res = db.exec("SELECT * FROM test"); console.log(db.getRowsModified()); console.log(JSON.stringify(res)); // [{"columns":["col1","col2"],"values":[[1,111],[2,222],[3,3333]]}] // 執行一條sql語句，並為結果的每一行調用一個回調 db.each("SELECT * FROM test where col1<$col1", {$col1:3}, function(row){console.log(row.col2);} ); // 注意：上面的增、改、刪都只是對載入內存中的數據進行變更，我們需要把內存中的數據再存入磁盤文件中，不然一切皆枉然。 var data = db.export(); var buffer = Buffer.from(data, 'binary'); fs.writeFileSync("d.sqlite", buffer); document.querySelector('#result').innerHTML = "SQLite database changed."; // 完成操作后，必須關閉數據庫，與數據庫關聯的內存和所有關聯的語句將被釋放，否則內存消耗將永遠增加 // db.close(); }); function delete_row(id){ db.run("DELETE FROM test WHERE col1=(?)", [id]); res = db.exec("SELECT * FROM test"); console.log(db.getRowsModified()); console.log(JSON.stringify(res)); } </script> </body> </html>