IndexedDB not working in Firefox 29, but in Chrome

Question

I have a problem I have developed 50% of the code on Chrome IndexedDB using your console. However to test this code on Firefox I've noticed that does not work.

The asynchronous functions are not calling this JavaScript Firefox is included on a HTML:

<script src="./js/bdLocal.js"></script>

bdLocal.js:

var db;

function openDB() {
   console.log("openDB ") ;
   var request = indexedDB.open("dblocal",1);
   //db = request.result;

   request.onerror = function(event) {
      console.log("Database error: " + event.target.errorCode);
   };

   request.onsuccess = function(event) {
      console.log("Database onsuccess: " );
      db = request.result;
   };

   request.onupgradeneeded = function(event) { 
       console.log("onupgradeneeded");  

       var db = event.target.result;

       var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

       objectStore.createIndex("name", "name", { unique: true });
       objectStore.createIndex("email", "email", { unique: true });
       objectStore.createIndex("matricula", "matricula", { unique: false });
   };
}

Answer 1

You are probably trying to use an asynchronous function synchronously. The examples on the Mozilla website are unfortunately very wrong on this point. Unfortunately, so are several of the examples on HTML5Rocks. The following approach will cause you a lot of problems in any browser:

var unreliableGlobalDatabaseConnectionVariable;
var request = indexedDB.open(...);
request.onsuccess = function() {
  var reliableDatabaseConnectionVariable = request.result;
  unreliableGlobalDatabaseConnectionVariable = reliableDatabaseConnectionVariable;
};

var transaction = unreliableGlobalDatabaseConnectionVariable.transaction(...);
// etc.

indexedDB.open is an asynchronous function. This means many things, two of which are important to point out here:

1. The global db variable will be undefined up until the point that request.onsuccess executes. Therefore, any attempt to access the global variable before this point in time will not work because at this point in time the variable is undefined. Any code that follows request.onsuccess in the same scope is synchronous, and therefore also potentially before. Even code that is on a new line, farther down, is still before.
2. Once request.onsuccess finishes, then the global db variable may become closed, null, or undefined, or otherwise useless, at any point in time afterward. It could be 1 nanosecond later, it could be 5 milliseconds later, it could be an hour later, it could be never. There is no guarantee the database connection remains open afterward. In general, the way that some of the people that make indexedDB work inside the browser cause the database connection to be closed some small amount of time after there are no live transactions open on the connection.

Try experimenting with the following approach instead:

var openDatabaseRequest = indexedDB.open(name,version);

openDatabaseRequest.onsuccess = function(event) {
  console.log('Connected');
  var db = openDatabaseRequest.result;

  // Only access the db variable within this function
  // where it is guaranteed to be defined and open 
  // for the scope (all statements inside) of this function. For example,
  // do puts and gets and open cursors only inside this 
  // function.
  var transaction = db.transaction(...);
  var store = transaction.objectStore(...);
  var request = store.put(...);
  request.onsuccess = function() {
    console.log('put was successful');
  };
};

This question is probably a duplicate of:

• Uncaught TypeError: Cannot read property 'transaction' of null with an indexeddb
• Why is db.transaction not working with indexeddb?
• Is it bad to open several database connections in indexedDB?
• Why is onupgradeneeded never called in this code?
• Why is my onupgradeneeded callback never called when connecting to indexedDB?
• Why are my onsuccess/onerror callbacks not called when using indexedDB?
• Why does onsuccess sometimes get called before onupgradeneeded when connecting to indexedDB?

This question is actually unrelated to indexedDB, but related to the use asynchronous code in Javascript. It is therefore probably a duplicate of the hundreds of questions about using XMLHttpRequest.