一、關於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
（如何安裝sqlite請查看我上一篇文章：點擊查看）
2、安裝sql.js
cnpm install sql.js --save
安裝完后，查看目錄結構：
tree node_modules/sql.js -L 2
node_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
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>
獲取electron視頻教程，請關注公眾號“ IT資源分享平台 ”或者請掃描右上角的二維碼發送關鍵字“electron1”，每天都會分享一部項目實戰資源。
安利一個資源網站：查看