獲取以下代碼在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中沒有這樣的運氣。

編輯

我設法得到它到底工作 - 代碼可以看到下面。

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請求，瀏覽器執行其數據庫事務（如編碼）是異步的。即當數據開始執行查詢時數據還不存在。此代碼應工作：

//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），但這也並不簡單。