Problems with PhoneGap and Storage HTML5

Question

Problems with PhoneGap and Storage HTML5

Navigation

#1 by (5 votes)

2

I'm creating a small application where I have to store the driver data retrieved from a proper API to the application's local database. After a lot of head-shifting, I chose to use HTML5 Storage. At first I did not have major problems at first. When I went to make a simple query, it gave an error. Look at my code and the error:

onDeviceReady: function() {
    app.returnMsg       = document.getElementById('teste');
    app.btbSubmitLogin  = document.getElementById('submit_login');

    app.db = window.openDatabase("4routes","1.0","Produção",200000);
    app.db.transaction(function(tx){
        tx.executeSql("CREATE TABLE IF NOT EXISTS fornecedor_motorista (id_motorista INT(11) primary key,id_fornecedor INT(11),nome VACHAR(60),email VARCHAR(255),telefone VARCHAR(20),celular VARCHAR(20), cnh VARCHAR(20), validade VARCHAR(10),usuario VARCHAR(20), senha VARCHAR(100), created_at DATETIME)");
    });

    app.btbSubmitLogin.onclick = function(){
        var login       = $('.login').val();
        var senha       = $('.senha').val();
        var teste       = $('#teste').html();
        var idMotorista = '';
        $.getJSON(
            "<Minha API", 
            function(data){
                app.db.transaction(function(tx){
                    tx.executeSql('SELECT * FROM fornecedor_motorista',[],function(tx,res){
                        console.log(res.rows.item.length);
                        console.log(res.rows.item(1));
                    });
                });
            }
        );
    }
},

As you can see, when you start the application, the database is already created, if it does not exist. The second point is, when creating the tables it makes a request on our server and returns a JSON with the data of the driver. These data are returned normally, but when I do the query below to see the table, obviously it is empty, but see how strange. It has two console.log as return of the query, one to return its size and the other the data object. This is the return of the first console.log :

08-28 16:36:02.448: I/chromium(14642): [INFO:CONSOLE(62)] "1", source: file:///android_asset/www/js/index.js (62)

And this is the second return:

08-28 16:36:02.453: I/chromium(14642): [INFO:CONSOLE(63)] "Uncaught RangeError: Item index is out of range.", source: file:///android_asset/www/js/index.js (63)

I have tried to make insertions in the fornecedor_motorista table, but with this problem it does not present me the correct size it is difficult to understand the correct size of the data. Could you explain and give me some insight into this problem?

Thank you in advance.

Some comments:

When trying to create the database, I use a property of the localStorage class to check the existence of the database and it returns me null :

console.log(window.localStorage.getItem('dbExists'));

This returns me:

08-28 17:00:57.566: I/chromium(22007): [INFO:CONSOLE(59)] "null", source: file:///android_asset/www/js/index.js (59)

android localstorage apache-cordova

asked by anonymous 28.08.2014 / 21:44

1 answer

Import data from excel to sql server How to duplicate this jQuery function

score 5 · Accepted Answer

To get the number of elements returned in the query use:

res.rows.length

Instead of:

res.rows.item.length

Also note that the following line is trying to access the element at index 1, and therefore the second query element:

res.rows.item(1)

Now, Local Storage and Web SQL are different things. If getItem returns null means that you have not saved any value with the dbexists key, so it does not find anything with this key. One alternative is to assign this value when creating the database:

app.db.transaction(function(tx){
    tx.executeSql("CREATE TABLE IF NOT EXISTS fornecedor_motorista (id_motorista INT(11) primary key,id_fornecedor INT(11),nome VACHAR(60),email VARCHAR(255),telefone VARCHAR(20),celular VARCHAR(20), cnh VARCHAR(20), validade VARCHAR(10),usuario VARCHAR(20), senha VARCHAR(100), created_at DATETIME)",[],function(tx,res){
        window.localStorage.setItem("dbExists",true);
    });
});