How to delete a database in WebSQL programmatically?

I am new to Web SQL database and I use it to save data in a local database in a web page.

　I can create a database by

var db = openDatabase('database', '1.0', 'my database', 2 * 1024 * 1024);

　and I can create a table by doing this

db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS mytable (blah,blah)');
});

　I can delete the table by

db.transaction(function (tx) {
  tx.executeSql('DROP TABLE mytable');
});

　but is there a way to delete the database programmatically?

Using PersistenceJS there is a persistence.reset API which will wipe the database clean. PersistenceJS Site

For developing / testing purposes, you can view content and delete webSQL, IndexedDB, cookies, etc by searching for your domain name at this URL in Chrome:

chrome://settings/cookies

There, you can delete all the storage for a domain or just certain local storage entities. Yes, the URL implies just 'cookies', but the interface at this URL includes all types of offline storage.

It would be great I think if the Chrome developer tools interface had the ability to right-click and delete a data storage entity in the Resources tab along with inspecting the content. But for now, all I know of is the settings/cookies URL.

Spec says:

4.1 Databases

Each origin has an associated set of databases. Each database has a name and a current version. There is no way to enumerate or delete the databases available for an origin from this API.

I am developing a phonegap+jquery-mobile+KO app with offline storage using web sql via persistencejs, and jasmine js for BDD.

I'm working on some sort of "database cleaner" to be executed after each spec. When I was searching on how to drop a web sql database I read the reply https://stackoverflow.com/a/10929725/667598 (in this thread/question), and went to see what's in that directory (Mac OS X).

cd ~/Library/Application\ Support/Google/Chrome/Default/databases

Inside you will see a Databases.db SQLite3 database, and directories for each origin. These directories are named with the pattern protocol_host_somenumber (I don't know what that number is). So for example, in my case, since my apps are just files I open in Google Chrome with the file:/// … protocol, I can see a file__0 directory. And for twitter and I can also see a http_twitter.com_0 and a https_twitter.com_0.

Inside this directories all file names are just numbers. For example inside file__0 I found a file named 8 and another named 9. In my case, these files are websql database. I don't know if there also Indexed DB databases in chrome's Default/databases dir.

With this names it is a little hard to guess what database is what. You can open the database and you'll have to infer the app or site via its tables and data.

Luckily, the Databases.db I mentioned before is a mapping between those files named with numbers and the databases.

You can open the Databases.db and any other web sql file with the sqlite3 command

sqlite3 Databases.db

Obviously, once inside the sqlite3 shell, is handy to have some SQL knowledge. Anyway, it is also always handy some help, which is available via the command

.help

With the command .tables you can list tables in the database. Inside this Databases.db we can find the tables Databases and meta. The important one is Databases, so with a

select * from Databases;

we can see the mapping between the databases and their files. For example

7|http_jquerymobile.com_0|testdb|html5 test db|200000

8|file__0|elfaro_dev|Base de datos de ElFaro para desarrollo|734003200

The first column is the id of the table which is the number used for db file names, the second is the origin (the directory) the other columns are the db name, the db description and the estimated size used when creating the db from the Javascript API.

So to actually delete a database what I did was to delete it from this table, for example:

delete from Databases where id = 8

And then delete the actual file from the filesystem (outside sqlite3 shell)

rm file__0/8

And that's it.

PS: I know this is a too long answer for a simple subject but I just needed to flush this from my system and back it up somewhere like SO or a blog.

The developer options

There is no way to enumerate or delete the databases programmatically (yet).
Chrome developers can navigate to chrome://settings/cookies search and delete any database Opera developers can navigate to opera://settings/cookies

The only way to truly delete a database (and everything else)

A new Spec says this might be possible in the feature with both response header and javascript. The disadvantages is that you can't control what is being deleted, So you would need to create a backup first of everything else unless you want to clear everything

2.1.3. The storage parameter

The storage parameter indicates that the server wishes to remove locally stored data associated with the origin of a particular response’s url. This includes storage mechansims such as (localStorage, sessionStorage, [INDEXEDDB], [WEBDATABASE], etc), as well as tangentially related mechainsm such as service worker registrations.

Js:

navigator.storage.clear({
    types: [ "storage" ],
    includeSubdomains: true // false by default
});

Response header:

res.header("Clear-Site-Data", "storage; includeSubdomains");

But this is not avalible to any browser yet...

Best solution for clients (not the developers)

/* This will fetch all tables from sqlite_master
 * except some few we can't delete.
 * It will then drop (delete) all tables.
 * as a final touch, it is going to change the database
 * version to "", which is the same thing you would get if
 * you would check if it the database were just created
 *
 * @param name [string] - the database to delete
 * @param cb [function] - the callback when it's done
 */
function dropDatabase(name, cb){
    // empty string means: I do not care what version, desc, size the db is
    var db = openDatabase(name, "", "", "");

    function error(tx, err){
        console.log(err);
    }

    db.transaction(ts => {
        // query all tabels from sqlite_master that we have created and can modify
        var query = "SELECT * FROM sqlite_master WHERE name NOT LIKE 'sqlite\\_%' escape '\\' AND name NOT LIKE '\\_%' escape '\\'";
        var args = [];
        var success = (tx, result) => {
            var rows, i, n, name;

            rows = result.rows;
            n = i = rows.length;

            // invokes cb once it’s called n times
            function after(){
                if (--n < 0) {
                    // Change the database version back to empty string
                    // (same as when we compear new database creations)
                    db.changeVersion(db.version, "", function(){}, error, cb);
                }
            }

            while(i--){
                // drop all tabels and calls after() each time
                name = JSON.stringify(rows.item(i).name);
                tx.executeSql('DROP TABLE ' + name, [], after, error);
            }

            // call it just 1 more extra time incase we didn't get any tabels
            after();
        };

        ts.executeSql(query, args, success, error);
    });

}

Usage

dropDatabase("database", function(){
    console.log("done")
});