javascript - Chrome 在请求之间删除 WebSQL 数据库

Question

所以我正在尝试创建一个以 AngularJS 作为前端的离线应用程序并 Play ! 1.2.5作为后端。在客户端，我创建了 2 个页面 - main.html 和 login.html，在 login.html 上提交表单后，将创建一个 WebSQL 数据库

var db = openDatabase("users", "1.0", "User Database", 2*1024*1024 

添加一些数据并将用户转发到 main.html。

问题是当我打电话

var db = openDatabase("users", "1.0", "User Database", 2*1024*1024); 

在 main.html 上，我获取了数据库，但没有在 login.html 页面上创建任何信息。这是怎么回事？

编辑:这是一些代码

login.html(JavaScript 部分):

var db = window.openDatabase("myDB", "1.0", "示例数据库", 2*1024*1024);

db.transaction(function(tx) {
                          tx.executeSql("drop table if exists users");
                          tx.executeSql("create table users (id unique, name)");
                          tx.executeSql("insert into users (id, name) values (?, ?)", [1, "Kevin"]);
});

main.html:

var db = window.openDatabase("myDB", "1.0", "示例数据库", 2*1024*1024);

db.transaction(function(tx) {
                    tx.executeSql("select * from users", [], function(tx, results) {
                            for(i=0; i<results.rows.length; i++) {
                                var u = {
                                    id: results.rows.item(i).id,
                                    name: results.rows.item(i).name,
                                }
                                console.log(u); //Nothing gets returned. Database in Resources tab is empty; no users!
                            }
                        });
});

我在index.html中创建的数据库显示了，但我输入的用户数据不存在。我使用的是默认的 Play!开发网络服务器。当我使用 LightTPD 时，不会出现此问题，但我当然无法访问我的 Play!应用程序数据库由于 Access-Control-Origin 的东西。

Answer 1

我认为您在执行插入之前就已经到达了 main.html。请记住，WebSQL API 是异步的，因此当您的代码发送事务以删除/创建/插入时，您的应用程序将不会等待并直接进入 main.html(如果您不使用回调来更改页面)。

您要做的就是发送交易并等待回调(onSuccessSql)更改为main.html。这是一个例子:

db.transaction(function(tx){
        tx.executeSql( "insert into users (id, name)...", onSuccessSql, onError)}, 
onError, onReadyTransaction);

function onReadyTransaction( ){
    console.log( 'Transaction completed' )
}

function onSuccessSql( tx, results ){
  //go to main.html()
}

function onError( err ){
    console.log( err )
}