Chrome Deleting WebSQL Database Between Requets

So i'm trying to create an offline app with AngularJS as the front-end and Play! 1.2.5 as the back-end. On the client side, I created 2 pages - main.html and login.html where upon submitting the form on login.html, a WebSQL database is created 

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

some data is added in and the user is forwarded to main.html.

The problem is that when I call 

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

on main.html, I get the database but with none of the information created on the login.html page. What is going on here?

EDIT: Here's some code

login.html (JavaScript section):

var db = window.openDatabase("myDB", "1.0", "Example Database", 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", "Example Database", 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!
                            }
                        });
});

The database I created in index.html shows up, but the User data I entered isn't there. I'm using the default Play! development web server. This problem does not occur when i'm using LightTPD, but then of course I can't access my Play! application DB due to Access-Control-Origin stuff.

I think your are getting to the main.html before the inserts can execute. Remember that WebSQL API is asynchronous, so when your code sends the transaction to drop/create/insert your app won't wait and goes straight for the main.html (if your are not using the callback to change the page).

What you have to do is send the transaction and wait for the callback (onSuccessSql) to change to the main.html. here is an example:

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 )
}