IndexedDB example

//<h1>Test IndexedDB</h1>
//name <input name=name /><br/>
//<button type=button name=add>Add</button>
//<button type=button name=indexGet>IndexGet</button><br/>
//key <input name=key /><br/>
//<button type=button name=put>Put</button>
//<button type=button name=delete>Delete</button>
//<button type=button name=get>Get</button><br/>
//<button type=button name=openCursor>OpenCursor</button>
//<table border=1></table>
//<script>
if ( ! ( 'indexedDB' in window ) )
    console.log( "ERROR: Upgrade your browser!" )
let db
const CURRENT_VERSION = 4
let res = window.indexedDB.open( 'idb-test', CURRENT_VERSION )
res.onupgradeneeded = ( event ) => { // req.onsuccess will automatically run after this
    let db = event.currentTarget.result
    if ( db.objectStoreNames.contains( 'organism' ) ){
        console.log( "deleteObjectStore organism" )
        db.deleteObjectStore( 'organism' )
    }
    if ( ! db.objectStoreNames.contains( 'organism' ) ){
        console.log( "createObjectStore organism" )
        let tbl = db.createObjectStore( 'organism', { keyPath : "key", autoIncrement : true } )
        tbl.createIndex( 'name', 'name', { unique:false } ) // if you need indexing
    }
    console.log( "DB upgraded to version " + CURRENT_VERSION )
}
res.onerror = ( event ) => { console.log( "ERROR: Stupid user not allow IndexedDB." ) }
res.onsuccess = ( event ) => {
    console.log( "IndexedDB is ready." )
    db = event.target.result
    db.onerror = ( event ) => { console.log( "ERROR: DB error: " + event.target.errorCode ) }
}
function add( row, cb ){ // callback cb(key) onsuccess
    console.log( "Add row..." );
    let res = db.transaction( "organism", "readwrite" ).objectStore( "organism" ).add( row )
    res.onsuccess = ( event ) => { console.log( "Add row success." ); cb( event.target.result ); }
    res.onerror = ( event ) => { console.log( "Add row failed." ) }
}
document.querySelector( '[name=add]' ).addEventListener( "click", () => {
    add( {
        name: document.querySelector('[name=name]').value,
    }, ( key ) => {
        document.querySelector('[name=key]').value = + key
    } );
}, false );
function put( row, cb ){ // callback cb() onsuccess
    console.log( "Put row..." )
    let res = db.transaction( "organism", "readwrite" ).objectStore( "organism" ).put( row )
    res.onsuccess = ( event ) => { console.log( "Put row success." ); cb(); }
    res.onerror = ( event ) => { console.log( "Put row failed." ) }
}
document.querySelector( '[name=put]' ).addEventListener( "click", () => {
    put( {
        key: + document.querySelector('[name=key]').value,
        name: document.querySelector('[name=name]').value,
    }, () => {} )
}, false )
function del( key, cb ){ // callback cb() onsuccess. Btw, "delete" is a javascript operator
    console.log( "Delete item..." )
    let res = db.transaction( "organism", "readwrite" ).objectStore( "organism" ).delete( key )
    res.onsuccess = ( event ) => { console.log( "Delete item success." ); cb(); }
    res.onerror = ( event ) => { console.log( "Delete item failed." ) }
}
document.querySelector( '[name=delete]' ).addEventListener( "click", () => {
    del( + document.querySelector( '[name=key]' ).value, () => {} )
}, false )
function get( key, cb ){ // callback cb(object|undefined) onsuccess
    console.log( "Get item..." );
    let res = db.transaction( "organism" ).objectStore( "organism" ).get( key )
    res.onsuccess = ( event ) => { console.log( "Get item success." ); cb( event.target.result ); }
    res.onerror = ( event ) => { console.log( "Get item failed." ) }
}
document.querySelector( '[name=get]' ).addEventListener( "click", () => {
    get( + document.querySelector( '[name=key]' ).value, ( row ) => {
        document.querySelector( '[name=name]' ).value = row.name
    } )
}, false )
function indexGet( index, value, cb ){ // callback cb(object|undefined) onsuccess
    console.log( "IndexGet item..." );
    let res = db.transaction( "organism" ).objectStore( "organism" ).index( index ).get( value )
    res.onsuccess = ( event ) => { console.log( "IndexGet item success." ); cb( event.target.result ); }
    res.onerror = ( event ) => { console.log( "IndexGet item failed." ) }
}
document.querySelector( '[name=indexGet]' ).addEventListener( "click", () => {
    indexGet( "name", document.querySelector( '[name=name]' ).value, ( row ) => {
        document.querySelector( '[name=key]' ).value = row.key
    } )
}, false )
function openCursor( cb ){ // callback cb(array) onsuccess
    console.log( "OpenCursor items..." )
    let res = db.transaction( "organism" ).objectStore( "organism" ).openCursor( )
    let table = []
    res.onsuccess = ( event ) => {
        let cursor = event.target.result
        if ( cursor ){
            table.push( cursor.value )
            cursor.continue()
        } else {
            console.log( "OpenCursor items success." )
            console.log( table )
            cb( table )
        }
    }
    res.onerror = ( event ) => { console.log( "OpenCursor items failed." ) }
}
document.querySelector( '[name=openCursor]' ).addEventListener( "click", () => {
    openCursor( ( table ) => {
        let innerHTML = "<tbody>"
        table.forEach( ( row ) => {
            innerHTML += "<tr><td>" + row.key + "<td>" + row.name
        } )
        document.querySelector( 'table' ).innerHTML = innerHTML
    })
}, false )
//</script>