How to delete a database in WebSQL programmatically?

Question

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?

Ozzie

To delete the database itself, remove it from ~/Library/Application\ Support/Google/Chrome/Default/databases. – Kidron

Answer 1

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.

Supat

Why does the spec not have support to delete databases? Why should they be there forever, if there are no tables in them? – Senary

wtf, so what If let's say I'll damage database? It's unacceptable, I can't force user to clear all cookies just because db on my site got damaged – Exist

Answer 2

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.

Foreignborn

Super! I knew about Persistence (using it) but for development, cookie settings was a goldmine! – Fremont

It seems the persistence.reset API is no longer available, but your method to delete was nice. Seems to be the only way to actually delete a db during development. – Sullyprudhomme

For developing and testing I use CTRL + SHIFT + I to enter the inspection screen on Chrome, then Application > Clear storage. – Moreau

Answer 3

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://mcmap.net/q/337478/-how-to-delete-a-database-in-websql-programmatically (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.

Nagana

Answer 4

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")
});

Baseline

navigator.storage.clear(...) doesn't seem to be implemented as of Chrome 78 :/ – Asshur

Answer 5

The localdatabase files are stored in your Windows user settings under Application Data > Google > Chrome > User Data > Default > databases.

So manually deleting them is theoretically possible. This is only useful while testing / developing on your own computer, since when another user opens your app/site, it is unlikely to have file system access.

However, even though you can find the files and delete them, the data sticks around. I've tried it with Chrome both open and closed and all chrome processes ended, and yet the browser inspector keeps showing me my old database with all the unwanted fields and data in it.

Casimiracasimire

On win7 I found the folder you mention above with sub folders for each domain. luckily only one file in the one I wanted to remove and the db was gone without a restart of chrome or anything like that. – Nephron

this has been the only working answer for me. I tried to remove everything using chrome://settings/cookies but that didn't work (version 38.0.2). fyi, you can open the database files (the name of my webDb file was just a digit) with a text editor like notepad++ and it will show your data. That way you can make sure you're deleting the correct database. – Printable

Answer 6

This is answered in HTML5 database storage (SQL lite) - few questions.

To summarize:

• Currently no way to drop a WebSQL database.
• Probably use Indexed DB or localStorage instead.

Carbazole

Answer 7

In my library implementation, I just delete all tables. Which, indeed, delete the database. List of tables are select * from sqlite_master.

Shoshone

Websql, which is sqlite. – Shoshone

Answer 8

Please note that if you use multiple

tx.executeSql('DROP TABLE mytable'); 

statements in the same transaction callback then make sure that they all exist or consider using DROP TABLE IF EXISTS syntax instead. If even one table doesn't exist when you try to drop it will result in the entire transaction failing. This failure results in a rollback of the transaction and means that the data will stay in your database even when you thought that it should have been deleted. There is no error reported unless you're specifically listening for it in the executeSql's 4th argument which is an error callback. This is intended behavior but is, in my experience, confusing.

Striate

Answer 9

No method to delete the existing database in websql it will clear when the cache is cleared or
The browser is closed. If you want to create a database with the same name Just use openDatabase Method It will first check for the existence of the database with the same name. If not exists it will create one otherwise it will open the existing one

please follow this link http://html5doctor.com/introducing-web-sql-databases/

Snodgrass

where did you get that websql will clear when the browser is closed? – Legrand