在普通桌面浏览器中测试时如何使用sqlite和cordova？

Question

在开发我的Cordova混合应用程序时,我已经习惯于在常规桌面浏览器中测试我的应用程序,到目前为止,这已经非常顺利.

现在我想在我的应用程序中添加sqlite功能.我看到有一个cordova的插件,但我很好奇,我怎么能写一个后备,以便如果没有使用cordova,我可以自然地使用sqlite而不使用cordova插件？理想情况下,我希望它被抽象化,以便本机sqlite对象的行为与插件完全相同,因此我可以在常规浏览器中完成所有测试,以最大限度地减少我将应用程序安装到实际设备的次数 - android的构建时间很长,所以我想尽可能地避免它.

谢谢!

Answer 1

您可以使用一个简单的包装器，该包装器将 WebSQL 用于浏览器，将 SQLite 用于设备。只需使用不同的数据库对象即可。WebSQL 和 SQLite API 几乎相同。您只需要对浏览器和设备进行不同的初始化。

这是我的示例代码（ES6）：

var runiOS = false;
var DB;

// Check browser or device

var onDeviceReady = new Promise(function(resolve, reject) {    
    if (document.URL.match(/^https?:/i)) {
        console.log("Running in a browser...");
        resolve();
    } else {
        console.log("Running in an app...");
        runiOS = true;
        document.addEventListener("deviceready", resolve, false);
    }
});

// Run application
onDeviceReady.then(function() {
    //  Init WebSQL on browser or SQLite on device
    if (runiOS) {
        DB = window.sqlitePlugin.openDatabase({ name: 'my.db', location: 'default' }, function (db) {}, function (error) { console.log('Open database ERROR: ' + JSON.stringify(error)); });          
        console.log('DB: SQLite');
    }
    else {
        DB = window.openDatabase('my', "0.1", "My list", 200000);    
        console.log('DB: WebSQL');
    }

    // ...

    db.transaction(function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS DemoTable (name, score)');
        tx.executeSql('INSERT INTO DemoTable VALUES (?,?)', ['Alice', 101]);
        tx.executeSql('INSERT INTO DemoTable VALUES (?,?)', ['Betty', 202]);
    }, function(error) {
        console.log('Transaction ERROR: ' + error.message);
    }, function() {
        console.log('Populated database OK');
    });


    db.transaction(function(tx) {
        tx.executeSql('SELECT count(*) AS mycount FROM DemoTable', [], function(tx, rs) {
            console.log('Record count (expected to be 2): ' + rs.rows.item(0).mycount);
        }, function(tx, error) {
            console.log('SELECT error: ' + error.message);
        });
    });
});