How can I remove a whole IndexedDB database from JavaScript?

JavascriptHtmlPhantomjsIndexeddb

Javascript Problem Overview


How can one remove a whole IndexedDB database from JavaScript, as opposed to just an object store? I'm using the IndexedDB shim, which may use WebSQL as its backend.

I'd mainly like to know how to do this for the PhantomJS (headless) browser, although Chrome, Safari (on iPad) and IE10 are other important browsers.

Javascript Solutions


Solution 1 - Javascript

As far as I can tell, one should use indexedDB.deleteDatabase:

var req = indexedDB.deleteDatabase(databaseName);
req.onsuccess = function () {
    console.log("Deleted database successfully");
};
req.onerror = function () {
    console.log("Couldn't delete database");
};
req.onblocked = function () {
    console.log("Couldn't delete database due to the operation being blocked");
};

I can confirm that it works with PhantomJS 1.9.0 and Chrome 26.0.1410.43.

Solution 2 - Javascript

I found that the following code works OK but to see the DB removed in the Chrome Resources Tab I have had to refresh the page. Also I found I had problems with the Chrome debug tools running while doing transactions. Makes it harder to debug but if you close it while running code the code seems to work OK. Significant also is to set a reference to the object store when opening the page. Obviously the delete part of the code is in the deleteTheDB method.

Code derived from example provided by Craig Shoemaker on Pluralsight.

var IndDb = {
    name: 'SiteVisitInsp',
    version: 1000,
    instance: {},
    storenames: {
        inspRecords: 'inspRecords',
        images: 'images'
    },
    defaultErrorHandler: function (e) {
        WriteOutText("Error found : " + e);
    },
    setDefaultErrorHandler: function (request) {
        if ('onerror' in request) {
            request.onerror = db.defaultErrorHandler;
        }
        if ('onblocked' in request) {
            request.onblocked = db.defaultErrorHandler;
        }
    }

};

var dt = new Date();
var oneInspRecord =
        {            
            recordId: 0,
            dateCreated: dt,
            dateOfInsp: dt,
            weatherId: 0,
            timeArrived: '',
            timeDeparted: '',
            projectId: 0,
            contractorName: '',
            DIWConsultant: '',
            SiteForeman: '',
            NoOfStaffOnSite: 0,
            FileME: '',
            ObservationNotes: '',
            DiscussionNotes: '',
            MachineryEquipment: '',
            Materials: ''
        };

var oneImage =
{
    recordId: '',
    imgSequence: 0,
    imageStr: '',
    dateCreated: dt
}


var SVInsp = {
    nameOfDBStore: function () { alert("Indexed DB Store name : " + IndDb.name); },
    createDB: function () {
        openRequest = window.indexedDB.open(IndDb.name, IndDb.version);

        openRequest.onupgradeneeded = function (e) {
            var newVersion = e.target.result;
            if (!newVersion.objectStoreNames.contains(IndDb.storenames.inspRecords)) {
                newVersion.createObjectStore(IndDb.storenames.inspRecords,
                    {
                        autoIncrement: true

                    });
            }

            if (!newVersion.objectStoreNames.contains(IndDb.storenames.images)) {
                newVersion.createObjectStore(IndDb.storenames.images,
                    {
                        autoIncrement: true
                    });
            }
        };

        openRequest.onerror = openRequest.onblocked = 'Error'; //resultText;

        openRequest.onsuccess = function (e) {
            //WriteOutText("Database open");
            IndDb.instance = e.target.result;
        };

    },
    
    deleteTheDB: function () {
        if (typeof IndDb.instance !== 'undefined') {
            //WriteOutText("Closing the DB");

            IndDb.instance.close();
            var deleteRequest = indexedDB.deleteDatabase(IndDb.name)

            deleteRequest.onblocked = function () {
                console.log("Delete blocked.");
            }

            deleteRequest.onerror =
                function () {
                    console.log("Error deleting the DB");
                    //alert("Error deleting the DB");
                };
                //"Error deleting the DB";

            deleteRequest.onsuccess = function () {

                console.log("Deleted OK.");
                alert("*** NOTE : Requires page refresh to see the DB removed from the Resources IndexedDB tab in Chrome.");
                //WriteOutText("Database deleted.");

            };
            

        };

    }
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionaknuds1View Question on Stackoverflow
Solution 1 - Javascriptaknuds1View Answer on Stackoverflow
Solution 2 - JavascriptCYoungView Answer on Stackoverflow