javascript - 在 sqlite 数据库中存储表单

Question

我进行了很多研究，但没有找到适合我的方案的解决方案。我有一个简单的 html/javascript 应用程序，我使用 cordova 打包它。html 页面有一个表单，可以将表单发布到服务器。当应用程序离线或没有可用的互联网连接时，我想将表单保存到 sqlite 数据库。我是 sqlite 的新手，我还没有找到任何兼容的数据类型来将表单存储到数据库。如果我使用 TEXT 或 BLOB，它只存储“[Object HTMLFormObject]”字符串。

请检查我的js代码：

db = window.sqlitePlugin.openDatabase({
    name: 'ambdb',
    location: 'default'
}, function (db) {
    db.transaction(function (tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS FORMS (form BLOB)');
    }, function (err) {
        alert('Open database ERROR: ' + JSON.stringify(err));
    });

});

function storeForms(formRecieved) {
    
    //alert(formRecieved.toString());
    //alert('text(): '+ formRecieved.text());
    //var jsonString = JSON.stringify(formRecieved);
    //var htmlText = escape(formRecieved.innerHTML);
    //var htmlText = formRecieved.innerHTML;
    //var simplyString = String(formRecieved);
    db.transaction(function (tx) {
        tx.executeSql('INSERT INTO FORMS (form) VALUES (?)', [formRecieved]);
    }, function (err) {
        alert('StoreForms ERROR: ' + JSON.stringify(err));
    });

}

function readForms(cb) {
    var submittedForms = [];
    db.transaction(function (tx) {
        tx.executeSql('SELECT form FROM FORMS', [], function (tx, results) {
            alert('total items: ' + results.rows.length);
            for (var i = 0; i < results.rows.length; i++) {
                var row = results.rows.item(i)['form'];
                //row = JSON.parse(row);
                /*var varstring = row.toString();
                alert('tostring: ' + varstring);
                var parser=new DOMParser();
                 var x = parser.parseFromString(varstring, "text/html");

                alert('x: '+ x);*/
        
                submittedForms.push(row);
            }
            cb.call(this, submittedForms);
        });

    });
}

document.addEventListener("online", function (e) {
        alert('I am online');
        isConnected = true;
        var promise1 = new Promise(function (resolve, reject) {
            readForms(function (forms) {
                resolve(forms);
            });
        }).then(function (submittedForms) {
            var numberOfRows = submittedForms.length;
            alert('submittedForms.length: ' + numberOfRows);
            if (numberOfRows > 0) {
                for (var i = 0; i < numberOfRows; i++) {
                    alert('Single row: '+ JSON.stringify(submittedForms[i]));
                    submittedForms[i].submit();
                }
                //deleteForms();
                return false;
            }

        })
    }, false);

注释代码显示了我尝试来回序列化解析 HTML 对象以将其存储在数据库中的可能方式。请指导我应该使用哪种列数据类型以及如何在代码中处理它。非常感谢！

标签： javascriptsqlitecordovacordova-plugins

Answer 1

我最终将 HTMLFormObject 转换为 JSON 对象。我将它作为字符串保存在数据库中。在从数据库读取时，我将其解析回 JSON 对象。我正在从这个 JSON 对象创建一个 html 表单。

function storeForms(formRecieved) {
    var elements = formRecieved.elements;
    var newForm = {};

    for (var i = 0; i < formRecieved.length; i++) {
        var elementName = elements[i].name;
        newForm[elementName] = elements[i].value;
    }

    var jsonString = JSON.stringify(newForm);

    db.transaction(function (tx) {
        tx.executeSql('INSERT INTO FORMS (form) VALUES (?)', [JSON.stringify(newForm)]);
    }, function (err) {
        alert('StoreForms ERROR: ' + JSON.stringify(err));
    });

}

function readForms(cb) {
    var submittedForms = [];
    db.transaction(function (tx) {
        tx.executeSql('SELECT form FROM FORMS', [], function (tx, results) {

            var row, formToSubmit, input, jsonRow = {};
            for (var i = 0; i < results.rows.length; i++) {
                row = results.rows.item(i)['form'];
                jsonRow = JSON.parse(row);
                formToSubmit = createFormToSubmit(jsonRow);
                submittedForms.push(formToSubmit);
            }
            cb.call(this, submittedForms);
        });

    });
}

function createFormToSubmit(jsonData) {
    var formToSubmit = document.createElement("form");
    var keys = Object.keys(jsonData);
    var fieldName, input;

    for (var i = 0; i < keys.length; i++) {
        fieldName = keys[i];
        input = document.createElement("input");
        input.type = "text";
        input.name = keys[i];
        input.value = jsonData[fieldName];
        formToSubmit.appendChild(input);
    }
    formToSubmit.setAttribute('method', "post");
    formToSubmit.setAttribute('action', "https:url");
    formToSubmit.setAttribute('target', "transFrame");
    return formToSubmit;

}