Получение следующего кода для работы в Chrome и Safari

Question

Не могу понять, почему это работает в Safari, но не в Chrome. Любая помощь будет высоко ценится.

//Create or use existing DB
var db = openDatabase('myTest', '1.0', 'mySpecialDatabase', 200000);

if (db) {
  //New Transaction
  db.transaction(function (tx) {
  tx.executeSql('DROP TABLE IF EXISTS foo');    
  tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
  //Insert test data
  tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "myTest")');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (2, "another")');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (3, "andYetAnother")');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (4, "ohAndAgain")');
    });
    alert("DB success");     
 }
else {
    alert("Oooops");
}

db.transaction(function (tx) {
    // Loop rows of DB, print values
    tx.executeSql('SELECT * FROM foo',[], function (tx, results) {
        var rows = results.rows;
        alert(rows.length);
        for (var index = 0; index < rows.length; index++) {
            var x = rows.item(index);
            alert(x.text);
        }
    });
});

Добавьте его в JSFiddle в любом браузере, работает так, как задумано в последнем выпуске Safari, но в Chrome такой удачи нет.

EDIT

Мне удалось заставить его работать в конце - код можно увидеть ниже.

var db = openDatabase('CBDB', '1.0', 'mySpecialDatabaseThatWontWork',10*1024*1024);

db.transaction(function (tx){
 tx.executeSql('DROP TABLE IF EXISTS cb');
 alert("dropped table");
 createDB();
 queryDB();
},
function (tx, error) {
    // error
    alert('0.Something went wrong: '+ error.message);
});

function createDB(){
    db.transaction(function (tx) {       
        tx.executeSql('CREATE TABLE IF NOT EXISTS cb (id unique, text)');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (1, "myTest")');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (2, "another")');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (3, "andYetAnother")');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (4, "ohAndAgain")');
        alert("DB success");  
        },
        function (tx, error) {
            // error
            alert('1.Something went wrong: '+ error.message);
        });
}

function queryDB(){
    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM cb',[], function (tx, results) {
            var rows = results.rows;
            alert(rows.length);
            for (var index = 0; index < rows.length; index++) {
                var x = rows.item(index);
                alert(x.text);
            } 
        },
        function (tx, error) {
        // error
        alert('2.Something went wrong: '+ error.message);
        });
    });
}

Answer 1

Проблема заключается в том, что, как и AJAX-запрос, Chrome выполняет свои транзакции базы данных (в кодированном виде) асинхронно. то есть данные еще не существуют, когда он начинает выполнять запрос. Этот код должен работать:

//Create or use existing DB
var db = openDatabase('myTest', '1.0', 'mySpecialDatabase', 200000);

if (db) {
  //New Transaction
  db.transaction(function (tx) {
  tx.executeSql('DROP TABLE IF EXISTS foo');    
  tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
  //Insert test data
  tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "myTest")');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (2, "another")');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (3, "andYetAnother")');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (4, "ohAndAgain")');
    });
    alert("DB success");     
    doQuery(); // call query only after database load is complete

 }
else {
    alert("Oooops");
}

function doQuery(){
  db.transaction(function (tx) {
      // Loop rows of DB, print values
      tx.executeSql('SELECT * FROM foo',[], function (tx, results) {
          var rows = results.rows;
          alert(rows.length);
          for (var index = 0; index < rows.length; index++) {
              var x = rows.item(index);
              alert(x.text);
          }
      });
  });
}

Возможно иметь синхронный доступ к базе данных (см. HTML5 Database API: синхронный запрос ), но это также не так просто.

Answer 2

Немного обновил код, и теперь это работает ..

var db = openDatabase('CBDB', '1.0', 'mySpecialDatabaseThatWontWork',10*1024*1024);

db.transaction(function (tx){
 tx.executeSql('DROP TABLE IF EXISTS cb');
 alert("dropped table");
 createDB();
 queryDB();
},
function (tx, error) {
    // error
    alert('0.Something went wrong: '+ error.message);
});

function createDB(){
    db.transaction(function (tx) {       
        tx.executeSql('CREATE TABLE IF NOT EXISTS cb (id unique, text)');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (1, "myTest")');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (2, "another")');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (3, "andYetAnother")');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (4, "ohAndAgain")');
        alert("DB success");  
        },
        function (tx, error) {
            // error
            alert('1.Something went wrong: '+ error.message);
        });
}

function queryDB(){
    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM cb',[], function (tx, results) {
            var rows = results.rows;
            alert(rows.length);
            for (var index = 0; index < rows.length; index++) {
                var x = rows.item(index);
                alert(x.text);
            } 
        },
        function (tx, error) {
        // error
        alert('2.Something went wrong: '+ error.message);
        });
    });
}