how do I force PouchDB to really delete records?

Question

I am creating a PouchDb like so :

var db = new PouchDB('my_db', 
        { auto_compaction: true, revs_limit: 1, adapter: 'websql' });

Then I create and delete a number of records :

db.put({ _id: '1'});
db.put({ _id: '2'});
db.put({ _id: '3'});

db.get('1')
.then(function(doc) {
    db.remove(doc)
});

db.get('2')
.then(function(doc) {
    db.remove(doc)
});

db.get('3')
.then(function(doc) {
    db.remove(doc)
});

From my reading of the documentation, this is the correct way to delete and remove records.
And this SO question and answer seems to suggest also that this is the way to do things.

However, if I use the Chrome inspector to look at my Web SQL DB, the records are still there :

I don't believe this is not a timing issue or anything like that, as I can refresh with just the delete code and then get a 404 not_found error

---

My application creates and keeps records in a local pouchDb until they have been synced to central server, at which time I want to clear them from the local database.
I'm creating lots of records and if I cannot clear them out then eventually I'm going to run out of space on the device (it is hybrid HTML5 mobile app).

Is it even possible to actually remove records from a local PouchDB?

If so, how do I do it?

If not, what is a good solution that I can easily swap in place of PouchDB?

(I'm really hoping it is possible because I've gone down this path of development, so if the answer to the first question is No, then I need a good answer to the third question)

Answer 1

As mentioned in the comments above, this is not yet possible but is being worked on (source 1 source 2). However, there is a work around which you might be able to use.

The workaround is to replicate the database locally to another PouchDB database and once the replication is complete, delete the original database. Deleted documents won't be replicated (source)

---

Here is a working demo:

(() => {
  // DECLARATION
  const dbName = 'testdb';
  const tmpDBName = 'tmpdb';
  const deleteFilter = (doc, req) => !doc._deleted;
  const doc1 = { _id: 'd1' };
  const doc2 = { _id: 'd2' };

  //  CREATION
  //  create database
  const maindb = new PouchDB(dbName);
  //  insert two documents
  maindb.post(doc1)
    .then(() => maindb.post(doc2))
    //  query for one document
    .then(() => maindb.get(doc1._id))
    //  delete this document
    .then((doc) => { console.log(doc); return maindb.remove(doc) })
    //  query for the same document
    .then(() => maindb.get(doc1._id))
    .catch((err) => { console.log(err) });

  //  CLEANUP
  //  delete a database with tmpdb name
  new PouchDB(tmpDBName).destroy()
    //  create a database with tmpdb name
    .then(() => Promise.resolve(new PouchDB(tmpDBName)))
    //  replicate original database to tmpdb with filter
    .then((tmpDB) => new Promise((resolve, reject) => {
      maindb.replicate.to(tmpDB, { filter: deleteFilter })
        .on('complete', () => { resolve(tmpDB) })
        .on('denied', reject)
        .on('error', reject)
    }))
    //  destroy the original db
    .then((tmpDB) => {
      console.log(tmpDB.name);
      return maindb.destroy().then(() => Promise.resolve(tmpDB))
    })
    //  create the original db
    .then((tmpDB) => new Promise((resolve, reject) => {
      console.log(tmpDB.name);
      try {
        resolve({ db: new PouchDB(dbName), tmpDB: tmpDB })
      } catch (e) {
        reject(e)
      }
    }))
    //  replicate the tmpdb to original db
    .then(({db, tmpDB}) => new Promise((resolve, reject) => {
      tmpDB.replicate.to(db)
        .on('complete', () => { resolve(tmpDB) })
        .on('denied', reject)
        .on('error', reject)
    }))
    //  destroy the tmpdb
    .then((tmpDB) => tmpDB.destroy())
    .then(() => { console.log('Cleanup complete') })
    .catch((err) => { console.log(err) });

})()

If you check the state of the database after executing this code, it'll contain only one document. Note that at times, I had to refresh the browser to be able to see the latest state of the database (a right click + Refresh IndexedDB wasn't enough).

If you want to cleanup the database while testing this, you can use this snippet:

['testdb', 'tmpdb'].forEach((d) => { new PouchDB(d).destroy() })