Javascript 中的 SQLite 访问答案

【问题标题】：SQLite access in JavascriptJavascript 中的 SQLite 访问
【发布时间】：2018-09-26 09:43:39
【问题描述】：

我想使用 JavaScript 代码访问 Sql Lite 数据库。 JavaScript 代码在 html5 中使用，必须部署在 blackberry 10 平台上。我使用以下代码没有成功：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>Prova</title>
</head>
<body>
    <script type="text/javascript">
//Provenia SRL ITC - Paola Savioli
//Questa funzione apre il database SQL Lite
//Il parametro che va cambiato è il nome del database
function ApriDatabase() {
    try {
        if (window.openDatabase) {
            var shortName = 'Ristoranti.sqllite';
            var version = '1.0';
            var displayName = 'Ristoranti italia';
            var maxSize = 65536; // in bytes
            db = openDatabase(shortName, version, displayName, maxSize);
        }
    } catch (e) {
        alert('Apri Database' + e);
    }
}
//Provenia SRL ITC - Paola Savioli
// Questa funzione eseque una query su un database aperto con la funzione ApriDatabase
function EseguiQuery($query, callback) {
    try {
        ApriDatabase();
        if (window.openDatabase) {
            db.transaction(

            function (tx) {
                tx.executeSql($query, [], function (tx, result) {
                    if (typeof (callback) == "function") {
                        callback(result);
                    } else {
                        if (callback != undefined) {
                            eval(callback + "(result)");
                        }
                    }
                }, function (tx, error) {});
            });
            return rslt;
        }
    } catch (e) {
        alert('Esegui Query' + e);
    }
}

function VisualizzaComuni() {
    try {
        var schemanode = document.GetElementById('RCOMUNI');
        schemanode.innerHTML = "";
        var result = EseguiQuery('SELECT * FROM COMUNE');
        for (var i = 0; i < result.rows.lenght; ++i) {
            var row = result.row.item(i);
            var notediv = document.createElement('div');
            notediv.innerHTML = 'Codice Provincia:' + row['PROVINCIA'] + 'Nome:' + row['NAME'];
            schemanode.appendchild(notediv);
        }
    } catch (e) {
        alert('Visualizza Comuni' + e);
    }
}
</script>
    <input type="button" name='select' onClick="VisualizzaComuni()"
        value='Visualizza Comuni'>
    <div id="RCOMUNI"></div>
</body>
</html>

【问题讨论】：

我对黑莓了解不多，但在大多数平台上，不可能有使用 Javascript 与本地数据库交互的 HTML 网站（除非它们公开可以通过 XmlHttpRequest 访问的 Web 服务）。
@Philipp - HTML5 在浏览器中包含几个不同的数据库层，包括 Blackberry 10 支持的 localStorage。我不确定这是一种格式还是其他格式之一不过，SQLite。
这里是 Blackberry 10 支持的另一个数据库：developer.blackberry.com/html5/apis/database.html 我只是看一下 API，看看提供了什么。编辑：实际上，这似乎是问题代码中尝试的内容。

标签： javascript html sqlite blackberry-10

【解决方案1】：

您可以考虑使用WebSQL API，根据http://caniuse.com/#feat=sql-storage 支持BlackBerry 7 和10。

请注意，API 永远不会成为官方标准，并且已停止对其的开发。但如果您只想定位黑莓，它可能是一个有效的选择。

【讨论】：

【解决方案2】：

您发布的代码存在一些问题，包括对.lenght 的引用而不是.length 以及在内置成功和错误处理程序时使用try catch 块。所以我做了一个演示。

首先，它似乎没有什么区别，但是这是 HTML5 对吧？使用 HTML5 文档类型，而不是 HTML 4.01 Transitional 文档类型：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo by userdude</title>
...

接下来，为了演示的目的，我修改了标记。在这种情况下，我们有：

<body>
<input type="button" id="run" value='Run Query'>
<div id="query"></div>
<table id="table" border="1" cellspacing="1" cellpadding="5"></table>
</body>
</html>

在head 元素中，我使用事件侦听器来等待DOM 加载。请记住，我没有黑莓来测试它，并且对于黑莓或其他设备，您可能应该使用deviceready 而不是load。我认为。我还附加了button 的事件处理程序，该处理程序使用.addEventListener 运行查询，但请注意我在负载处理程序中执行此操作。在尝试访问 DOM 之前，您必须等待。

另外，IE 支持attachEvent 而不是addEventListener。我想黑莓支持后者，但我不确定。

window.addEventListener('load', function load(){
    var run = document.getElementById('run'),
        data = document.getElementById('table'),
        qtext = document.getElementById('query'),
        dropped = false,
        created = false,
        cities = ['Houston', 'Dallas', 'Paris', 'New York', 'Buenos Aires', 'London'],
        shortName = 'Cities',
        version = '1.0',
        displayName = 'Cities Demo',
        maxSize = 5 * 1024 * 1024,
        db = false,
        queries = [];

    run.addEventListener('click', query);

这将建立我的数据库，包括运行对 populate() 的初始调用，以便我们使用一些数据。

    open();

这是我添加到运行按钮的功能。

    function query() {
        transact('SELECT * FROM Cities', view);
    }

这只是为了向数据库添加数据。请参阅上面的 cities 变量。

    function populate(tx) {
        var city,
            i = 0;

一旦我将cities 的条目数组清空到INSERT，我就会阻止它运行。 dropped 和 created 对 DROP 和 CREATE 事务执行相同的操作。

特别注意我是怎么做的；看到transact('...', populate)?在这种情况下，我使用populate 循环返回，直到我完成添加所有cities 条目。这是异步的，因此您必须设置回调以在必要时等待前面的查询运行。在这种情况下，我最终可能会在添加行后删除表。所以我必须等待，然后遍历cities 列表。

        if (cities) {
            if (!dropped) {
                dropped = true;
                transact('DROP TABLE IF EXISTS Cities', populate);

                return;
            }

            if (!created) {
                created = true;
                transact('CREATE TABLE IF NOT EXISTS Cities (id unique, City)', populate);

                return;

            }

我不需要在这里重复到populate，因为我只需要INSERT 并继续前进。

            while (city = cities.pop()) {
                transact('INSERT INTO Cities (id, City) VALUES (' + i++ + ', "' + city + '")');
            }

            cities = false;
        }
    }

这个函数所做的只是给数据库一个打开的或新的引用，或者return false。这会使transact() 的执行短路。

    function open() {
        if (!db && window.openDatabase) {
            db = window.openDatabase(shortName, version, displayName, maxSize);
        }

        if (cities) {
            db.transaction(populate);
        }

        return db;
    }

这是脚本的核心。我从query() 调用它，在这种情况下callback 是view，它指向贯穿结果集并从集合中创建table 的函数。

    function transact(query, callback) {
        var cb = callback,
            qel = document.createElement('p'),
            qid = queries.length;

        if (!open()) {
            console.log('HTML5 Database not supported.');

            return false;
        }

        db.transaction(transact_cb);

        qel.innerHTML = query + ' Query Result: <span id="q' + qid + '">Pending...</span>';

        qtext.appendChild(qel);

        queries[qid] = query;

注意最后两个参数transact_success, transact_error。这就是您处理这些异步调用的方式。

        function transact_cb(tx) {
            tx.executeSql(query, [], transact_success, transact_error);
        }

不太清楚为什么里面有eval...？

        function transact_success(tx, result) {
            var rtext = document.getElementById('q' + qid);

            rtext.className = 'success';
            rtext.innerHTML = 'Success.';

            if (typeof cb == "function") {
                cb(result);
            } else if (cb != undefined) {
                eval(cb + "(result)");
            }
        }

注意console.log(error);。

        function transact_error(tx, error) {
            var rtext = document.getElementById('q' + qid);

            rtext.className = 'error';
            rtext.innerHTML = 'Error logged to console.';

            console.log(error);
        }
    }

此函数创建table 结果集视图。你可能会注意到我遍历每一行，和每一行的列。

    function view(result) {
        var thead = '<thead><tr>',
            tbody = '<tbody>',
            row,
            col;

        for (var i = 0, rows = result.rows.length; i < rows; ++i) {
            row = result.rows.item(i);

            tbody += '<tr>';

            for (col in row) {
                if (i === 0) {
                    thead += "<th>" + col + "</th>";
                }

                tbody += '<td>' + row[col] + '</td>';
            }

            tbody += '</tr>';
        }

        thead += '</tr></thead>';
        tbody += '</tbody>';

        data.innerHTML = thead + tbody;
    }

});

您可以通过在此处下载 HTML 文件来下载该文件并在本地运行它（由于安全错误，它不会在 jsFiddle 上运行）：

http://pastebin.com/FcSiu6ZZ

所以你去。希望这将有助于使这更容易理解。如果您有任何问题，请告诉我。

【讨论】：