title: WebSQL and jQuery - DB vanishes on refresh
body: <p>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. </p>
  
  <p>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?</p>
  
  <p>Here's my simple code:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>  &lt;div data-role="main" class="ui-content"&gt;
      &lt;h2&gt;Hello&lt;/h2&gt;
      &lt;button id="deviceReady"&gt;Device Ready&lt;/button&gt;
      &lt;button id="resetSQL"&gt;Reset SQL&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>Then some jQuery:</strong></p>
  
  <pre><code>$(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');
      });
    });
  });
  </code></pre>
  
  <p><strong>Actual DB Stuff</strong></p>
  
  <pre><code>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")');
    });
  }
  </code></pre>
  
  <p>So all I do is open the webpage, click "Device Ready" button to run the <code>initDB</code> function. The data shows up in the database correctly, but then when I refresh, its gone. </p>