Getting a “setVersion” is not a function error when using indexedDB

Question

I tried to use following code to test the performance of IndexedDB. The code is modified from http://www.html5rocks.com/en/tutorials/indexeddb/todo/ , It works well in chrome, but fails in Firefox 10, saying "db.setVersion is not a function". I want to know how can I modify the code to make it work in firefox?

        var count=0;
        var MAX=10;
        var times=3;
        var allTime;
        var stime;
        var etime;

        var html5rocks = {};
        var indexedDB = window.indexedDB || window.webkitIndexedDB ||
                        window.mozIndexedDB;

        if ('webkitIndexedDB' in window) {
            window.IDBTransaction = window.webkitIDBTransaction;
            window.IDBKeyRange = window.webkitIDBKeyRange;
        }

        html5rocks.indexedDB = {};
        html5rocks.indexedDB.db = null;

        html5rocks.indexedDB.onerror = function(e) {
            //console.log(e);
            alert("Why didn't you allow my web app to use IndexedDB?!");  
        };

        html5rocks.indexedDB.open = function(type) {

        var request = indexedDB.open("todos");
            request.onsuccess = function(e) {
            var v = "1.20";
            html5rocks.indexedDB.db = e.target.result;
            var db = html5rocks.indexedDB.db;
            // We can only create Object stores in a setVersion transaction;
            if (v!= db.version) {

                var setVrequest = db.setVersion(v);
                // onsuccess is the only place we can create Object Stores
                setVrequest.onerror = html5rocks.indexedDB.onerror;
                setVrequest.onsuccess = function(e) {
                    if(db.objectStoreNames.contains("todo")) {
                        db.deleteObjectStore("todo");
                    }

                    var store = db.createObjectStore("todo",
                        {keyPath: "number"});
                        addTest();
                };

            }
            else addTest();
            };

            request.onerror = html5rocks.indexedDB.onerror;

        }

        html5rocks.indexedDB.addTodo = function(todoText,num) {
            var db = html5rocks.indexedDB.db;
            var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
            var store = trans.objectStore("todo");

            var data = {
            "text": todoText,
            "number": num
            };

            var request = store.put(data);

            request.onsuccess = function(e) {
                count++;
                if(count>=times*MAX)
                {
                    etime=new Date;
                    var t=document.getElementById('result').innerHTML;
                    document.getElementById('result').innerHTML=t+((etime.valueOf()-stime.valueOf())/times)+"<br/>";
                    allTime=0;stime=new Date;count=0;
                    getTest();
                }

            };

            request.onerror = function(e) {
            console.log("Error Adding: ", e);
            };
        };

        html5rocks.indexedDB.getTodo = function(id) {
            var db = html5rocks.indexedDB.db;
            var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
            var store = trans.objectStore("todo");

            var request = store.get(id);

            request.onsuccess = function(e) {
                count++;
                if(count>=times*MAX)
                {
                    etime=new Date;
                    var t=document.getElementById('result').innerHTML;
                    document.getElementById('result').innerHTML=t+((etime.valueOf()-stime.valueOf())/times)+"<br/>";
                    allTime=0;stime=new Date;count=0;
                    delTest();
                }
            };

            request.onerror = function(e) {
            console.log("Error getting: ", e);
            };
        };

        html5rocks.indexedDB.deleteTodo = function(id) {
            var db = html5rocks.indexedDB.db;
            var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
            var store = trans.objectStore("todo");

            var request = store.delete(id);

            request.onsuccess = function(e) {
                count++;
                if(count>=times*MAX)
                {
                    etime=new Date;
                    var t=document.getElementById('result').innerHTML;
                    document.getElementById('result').innerHTML=t+((etime.valueOf()-stime.valueOf())/times)+"<br/>";
                    allTime=0;stime=new Date;count=0;
                    dataTest();
                }
            };

            request.onerror = function(e) {
            console.log("Error Adding: ", e);
            };
        };

        html5rocks.indexedDB.addData = function(d) {
            var db = html5rocks.indexedDB.db;
            var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
            var store = trans.objectStore("todo");
            var data={
                "text":d,
                "number":1
            };
            var request = store.put(data);

            request.onsuccess = function(e) {
                etime=new Date;
                var t=document.getElementById('result').innerHTML;
                document.getElementById('result').innerHTML=t+((etime.valueOf()-stime.valueOf()))+"<br/>";
            };

            request.onerror = function(e) {
            console.log("Error Adding: ", e);
            };
        };



        function addTest() {
            for(i=1;i<=times*MAX;i++)
                html5rocks.indexedDB.addTodo('          ',i);
        }
        function getTest() {
            for(i=1;i<=times*MAX;i++)
                html5rocks.indexedDB.getTodo(Math.round(Math.random()*(MAX*times-1)+1));
        }
        function delTest() {
            for(i=1;i<=times*MAX;i++)
                html5rocks.indexedDB.deleteTodo(i);
        }
        function dataTest() {
            data=' ';
            for(i=1;i<=21;i++)
                data=data+data;
            stime=new Date
            html5rocks.indexedDB.addData(data);
        }
        function init() {
            stime=new Date;
            allTime=0;
            html5rocks.indexedDB.open();

        }

Answer 1

The spec is not finalized. This is currently shipped as the property mozIndexedDB in Gecko and webkitIndexedDB in Chrome until the standard is finalized. So you have to write for moz also. Now this code is only for webkit.

https://developer.mozilla.org/en/IndexedDB

Answer 2

setVersion() is Deprecated

The new way is to define the version in the IDBDatabase.open() method

firefox from version 10.0 implements open() with the new specification in which an indexeddb database IDBDatabase version is set as the second parameter of the open() method

example

var v = "1.20";
var request = indexedDB.open("todos", v);

html5 indexeddb javascript

Answer 3

The problem here is not the one chosen as the correct answer.

The problem is that the IndexedDB examples on HTML5Rocks were written to the pre-January IndexeDB spec. The working group has since published a breaking change going from the setVersion API to the new onupgradedneeded style.

Here, Firefox is technically correct to fail. Star this issue if you want to see Chrome do the same.