I have a very simple app (the beginnings of a larger app) which does one thing at this point. All it does is create a new database and table and inserts a single row of data. The problem is, when I hit "refresh" on the browser, the data and table is gone. I'm using Chrome and the developer inspection tools to see the data in the WebSQL tables.
Anyone had this before? What am I doing wrong? I thought the point of HTML5 was persistant data so even on refresh the DB should stick around. Am I wrong on that?
Here's my simple code:
index.html
<div data-role="main" class="ui-content">
<h2>Hello</h2>
<button id="deviceReady">Device Ready</button>
<button id="resetSQL">Reset SQL</button>
</div>
Then some jQuery:
$(document).ready(function() {
$("#deviceReady").click(function(){
alert("device ready");
initDB();
});
$("#resetSQL").click(function () {
var db = openDatabase(dbName, dbTitle, dbVersion, dbMaxSize);
db.transaction(function(tx) {
tx.executeSql('DROP TABLE IF EXISTS creds');
tx.executeSql('DROP TABLE IF EXISTS foo');
});
});
});
Actual DB Stuff
function initDB() {
var db = openDatabase(dbName, dbTitle, dbVersion, dbMaxSize);
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS creds (id unique, usr, psw)');
tx.executeSql('INSERT INTO creds (id, usr, psw) VALUES (1, "none", "none")');
});
}
So all I do is open the webpage, click "Device Ready" button to run the initDB
function. The data shows up in the database correctly, but then when I refresh, its gone.