これはSafariで動作しますが、いないクロムに理由を把握することができないようChromeとSafariの

Question

の両方で動作するように以下のコードを取得します。どんな助けでも大歓迎です。

//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の最新版が、クロムではありません、このような幸運に意図したとおりに動作します。

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

わずかにコードを更新し、これが機能するようになりました..

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）を持つことが可能であるが、これも簡単ではありません。