How to delete a database in WebSQL programmatically?

javascript

websql

database

developer-tools

byAnton Shumikhin·Aug 17, 2024

The quickest way to purge a WebSQL database involves removing all the tables with a DROP TABLE SQL command. Here's a simple function:

function purgeWebSQL(db) {
  db.transaction(tx => {
    tx.executeSql("SELECT name FROM sqlite_master WHERE type='table'", [], (tx, results) => {
      for (let i = 0; i < results.rows.length; i++) {
        tx.executeSql(`DROP TABLE IF EXISTS ${results.rows.item(i).name}`);
      }
    });
  });
}

This command will drop all tables, effectively leaving the database structure intact, but empty of data. As Gollum would say, "We swears, Precious, the database will be empty! We swears!" 😄

Using external libraries: PersistenceJS

The WebSQL API is fairly limited and does not offer a built-in method to delete databases. Here, PersistenceJS can prove useful. It offers a set of advanced operations that provide a more granular control over your WebSQL operations. This is like an extra toolbox that you didn't know you needed.

Deleting storage in Chrome

Google Chrome provides an interface where you can manually manage site data including WebSQL, IndexedDB, and other storage types. To access this, visit the chrome://settings/siteData URL. Here, you can manually inspect and remove the database tied to your particular application, just like cleaning out your garage.

Resetting the database in absence of an official method

Sometimes, the best way to delete something is to reset it. The WebSQL API doesn't strictly offer a deleteDatabase function, but you can mimic this behavior by resetting the version of the database to "" and dropping all tables:

db.changeVersion(db.version, "", function (t) {
  // DROP all tables in a loop
  // It is like burning the house down because spiders, but it works 😄
});

Persistence issues and solutions

Attempts to delete a database can sometimes lead to unexpected persistence issues. Even if you clear the data through Chrome User Data, there's no iron-clad guarantee of having fully cleared the data due to potential caching: a phantom haunting your storage, so to speak.

In such cases, look towards browser developer options, which provide a client-side solution. With these tools, you may inspect or remove databases manually to ensure a thorough cleanup.

Future of data cleanup

In the future, database deletion could become less of a pain with the W3C's webappsec-clear-site-data specification. Once implemented, it may allow clearing data through an HTTP response header. A rainbow on the horizon for developers?

A wishlist for Chrome developer tools

A humble feature request: right-click deletion in Chrome developer tools. This would certainly ease the task of managing storage while testing. How cool would it be to right-click and Bam! data gone!?

explain-codes / Javascript / How to delete a database in WebSQL programmatically?

Linked

How to remove and clear all localStorage data



When is localStorage cleared?



Drop a temporary table if it exists



Delete SQL rows where IDs do not have a match from another table



How to delete a cookie?

