2024/02/05

在網頁使用 sqlite

SQLite compiled to JavaScript 透過 WASM，可在網頁直接載入 sqlite db，使用 SQL 指令操作資料庫。WebAssembly或稱wasm是一個低階程式語言，讓開發者能運用自己熟悉的程式語言（最初以C/C++作為實作目標）編譯，再藉虛擬機器引擎在瀏覽器內執行。透過 WebAssembly 可以讓一些 C/C++ 開發的函示庫，移動到網頁裡面運作。sql.js 就是用這種方式，讓網頁可以直接使用 sqlite 資料庫。

使用sql.js要先初始化資料庫物件

引用 javascript

<script src='https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.9.0/sql-wasm.min.js'></script>

接下來有兩種方式初始化資料庫

方法 1: fetch

    async function initdb() {
        let config = {
            locateFile: filename => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.9.0/sql-wasm.wasm`
        };
        const sqlPromise = initSqlJs(config);
        const dataPromise = fetch("csv/townsnote.db").then(res => res.arrayBuffer());
        const [SQL, buf] = await Promise.all([sqlPromise, dataPromise])
        const sqlitedb = new SQL.Database(new Uint8Array(buf));
        window.sqlitedb = sqlitedb;
    };

    initdb();

方法 2: XMLHttpRequest

    let config = {
        locateFile: filename => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.9.0/sql-wasm.wasm`
    };
    initSqlJs(config).then(function(SQL){
        const xhr = new XMLHttpRequest();

        xhr.open('GET', 'csv/townsnote.db', true);
        xhr.responseType = 'arraybuffer';

        xhr.onload = e => {
            const uInt8Array = new Uint8Array(xhr.response);
            const db = new SQL.Database(uInt8Array);

            window.sqlitedb = db;

            // const contents = db.exec("SELECT * FROM towns");
            // contents is now [{columns:['col1','col2',...], values:[[first row], [second row], ...]}]
            // console.log("contents=",contents);
        };
        xhr.send();
    });

初始化資料庫後，就可以直接使用資料庫，執行 SQL 查詢指令

let contents = window.sqlitedb.exec("SELECT * FROM towns where id="+id);

以下是載入 sqlite db，執行一個 SQL 查詢的範例

<!DOCTYPE html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.9.0/sql-wasm.min.js'></script>
    <script>
    async function initdb() {
        let config = {
            locateFile: filename => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.9.0/sql-wasm.wasm`
        };
        const sqlPromise = initSqlJs(config);
        const dataPromise = fetch("csv/townsnote.db").then(res => res.arrayBuffer());
        const [SQL, buf] = await Promise.all([sqlPromise, dataPromise])
        const sqlitedb = new SQL.Database(new Uint8Array(buf));
        window.sqlitedb = sqlitedb;
    };

    initdb();

    function get_town_by_id() {
        if(!window.sqlitedb) return;
        let id = document.getElementById('id').value;
        let contents = window.sqlitedb.exec("SELECT * FROM towns where id="+id);
        console.log("contents=", contents);

        var jsonArray = JSON.parse(JSON.stringify(contents))
        console.log("jsonArray=", jsonArray);
        document.getElementById('result').value = JSON.stringify(contents);
    };
    </script>

</head>
<body>
    <input type="text" value="9007010" id="id"></input>
    <button onclick="get_town_by_id();">query</button>
    <br/><br/>
    <textarea id="result" rows="20" cols="50"></textarea>
</body>
</html>
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)