JSFiddle - React, Tailwind, and code Playground

by Keith Henry

HTML

<button id="access">
access
</button>

<button id="clear">
clear
</button>

<button id="reset">
reset
</button>

<div>

</div>

JavaScript

import * as idb from 'https://cdn.jsdelivr.net/npm/idb@8/+esm';

async function clearAll() {
    const db = await idb.openDB('myDB', 1);
    const stores = [...db.objectStoreNames];
    for (const store of stores)
        await db.clear(store);
        
    location.reload()
}

async function open() {
	return await idb.openDB('myDB', 1, { upgrade: (db, oldVersion) => {
  	if(oldVersion === 1) return;
    
    db.createObjectStore('test', { keyPath: 'id' }).
       createIndex('name', 'name', { unique: false });
       
    // Mimic upgrade with additions and replacements
    db.deleteObjectStore('test');
        
    db.createObjectStore('test', { keyPath: 'id' }).
       createIndex('name', 'name', { unique: false });
       
    db.createObjectStore('testFoo', { keyPath: 'id' });
    db.createObjectStore('testBar', { keyPath: 'id' });
  }});
}

async function fillTest() {
  console.log('fill test data');
	const db = await open();
  await db.put('test', { id: 1, name: 'test 1' } );
  await db.put('test', { id: 2, name: 'test 2' } );
  await db.put('test', { id: 3, name: 'test 3' } );
}

async function dump() {
	const db = await open();
  const a = await db.get('test', 1);
  console.log('get test data', a);
  document.querySelector('div').innerText = a ? JSON.stringify(a) : 'Not Found';
}

(async function() {
  console.log('init');
  await fillTest();
  document.querySelector('#access').addEventListener('click', () => dump());
  document.querySelector('#clear').addEventListener('click', () => clearAll());
  document.querySelector('#reset').addEventListener('click', () => fillTest());
})();