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中没有这样的运气。

修改

我设法让它最终运作 - 代码可以在下面看到。

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

略微更新了代码，现在可以使用..

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 2

问题在于，与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);
          }
      });
  });
}

可以进行同步数据库访问（c.f。HTML5 Database API : Synchronous request），但这也不是直截了当的。

获取以下代码以在Chrome和Safari中均可使用

2 个答案: