Offline Storage - Cannot figure this out for the life of me

Up until I added a new field (password) to filter through the data everything was working fine. I could submit the data, and it would store locally. However after trying to add a new field I cannot for the life of me get this to save data. I’m either blind to a typo or am completely missing something. It’s been a very long few days.

Any help would be greatly appreciated. I’m only supplying the javascript code as I don’t see any reason to show the HTML (i’ve triple double quadroople checked for typos)

    
<script src="http://www.google.com/jsapi"></script>
    <script>
      google.load("jquery", "1.4.1");
    </script>
    <script>
      var db = window.openDatabase("member_info", "", "Member Info", 1024*1000);

      function insertData(first_name, last_name, email, password) {
       db.transaction(function(tx) {
          tx.executeSql('INSERT INTO Details (first_name, last_name, email, password) VALUES (?, ?, ?, ?)', [first_name, last_name, email, password]);
       });
      }

      function renderResults(tx, rs) {
        e = $('#previous_data');
        e.html("");
        for(var i=0; i < rs.rows.length; i++) {
          r = rs.rows.item(i);
          e.html(e.html() + 'id: ' + r['id'] + ', first_name: ' + r['first_name'] + ', last_name: ' + r['last_name'] + ', email: ' + r['email'] + '<br />');
        }
      }
 
      function renderData(password) {
        db.transaction(function(tx) {
          if (!(password === undefined)) {
            tx.executeSql('SELECT * FROM Details WHERE password = ?', [password], renderResults);
          } else {
            tx.executeSql('SELECT * FROM Details', [], renderResults);
          }
        });
      }

      $(document).ready(function() {
        db.transaction(function(tx) {
          tx.executeSql('CREATE TABLE IF NOT EXISTS Members(id INTEGER PRIMARY KEY, name TEXT, latitude FLOAT, longitude FLOAT)', []);
          tx.executeSql('CREATE TABLE IF NOT EXISTS Details(id INTEGER PRIMARY KEY, first_name TEXT, last_name TEXT, email TEXT, password TEXT)', []);
        });

        $('#member_details').submit(function() {

            insertData($('#first_name').val(), $('#last_name').val(), $('#email').val(), $('#password').val());

          renderData();

        });
    
        $('#filter_previous_data_form').submit(function() {
          e = $('#filter_by_password').val();
          renderData(e);
          return false;
        });

        renderData();
      });
    </script>

Shouldn’t you DROP the table first and then CREATE it again so it actually has this password field? Or at least ALTER the table (if that is it all possible, TBH I haven’t toyed around with Database storage in browsers yet – wasn’t it deemed unsafe and scheduled for removal?)

Right now the table won’t be recreated because of the IF NOT EXISTS so the current table doesn’t have the password field, even though it’s the CREATE statement that’s in the code.

Edit:

I don’t know about removing, but the standard isn’t being actively maintained anymore – http://www.w3.org/TR/webdatabase/

The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.

Man… I knew it was something as simple as that but I for some reason (lack of sleep) could not wrap my head around it.

Kudos my friend!!