I am using a Web SQL db to store some info from a external xml  that I use in the web-app. Everytime someone goes to index.html it does a sessionStorage check to see if we have already loaded the stuff from the xml. If not it fetches the latest data and re-populates the db. So far no problem.

However - on index.html I also have a second page with the id view which I link to (<li><a href="#view" onclick="viewResult();">View result</a></li>). This page creates a list from data in the DB using this javascript:

2. <script>
3. function viewResult()  { 
4. $('#listan').empty();
5. 
   
6. var db = openDatabase('LaurDB', '1.0', 'LaurDB', 2 * 1024 * 1024);
7. db.transaction(function (tx) {
8. tx.executeSql('SELECT * FROM laureates', [], function (tx, results) {
9.  var len = results.rows.length, i;
10.  var html_sub_string='<li data-role="list-divider">Results</li>';
11.  for (i = 0; i < len; i++) {
12. html_sub_string = html_sub_string + '<li>' + results.rows.item(i).category + ' ' + results.rows.item(i).year + '<br>' + results.rows.item(i).name + '</li>';
13.  }  
14.  
15.  //$('<li data-role="list-divider">Results</li>' +  html_sub_string + ' <li data-role="list-divider">End Results</li>').appendTo('#listan'); 
16.  var html_string = html_sub_string + '<li data-role="list-divider">End Results</li>';
17.  
18.  
19.  $("#listan").html(html_string);
20.  $("#listan").listview("refresh");
21.  
22. });
23. }); 
24. }
25. </script>

This also works fine. I can move to the page and back. 

However, when I check with Chrome Developer Tools/Resources/Databases to see the database I notice that everytime I move to the "view-page it adds another DB with the same name. So if I move back and forth a few times I can end up with:

LaurDB

LaurDB

LaurDB

all with the same info in them. If I refresh the index.html I only see one DB again. Is this a bug in Chrome or am I actually creating a lot of duplicate DB's for the app that will take up space? 

/Björn