maloninc/app.js

## app.js
import DB from './indexed_db.js'

document.addEventListener('DOMContentLoaded', async () => {
    const db = await DB.connect('SampleDB', 1, 'sample_table', 'id')
    const saved = await DB.put(db, {id: '000', text: 'Hello, World', date: (new Date()).toISOString() })
    console.log('Saved data', saved)
    const result = await DB.get(db, '000')
    console.log('result', result)
})


## index.html
<html>
  <h1>Indexed DB with Promise</h1>
  Check console log.
  <script src=app.js type=module></script>
</html>

## indexed_db.js
export default {
    tableName: '',

    keyName: '',

    /**
     * Create and connect IndexedDB
     * @param dbName
     * @param version
     * @param tableName
     * @param keyName
     *
     * @return Promise with IndexedDB object
     */
    connect(dbName, version, tableName, keyName) {
        this.tableName = tableName
        this.keyName = keyName
        const dbp = new Promise((resolve, reject) => {
            const req = window.indexedDB.open(dbName, version);
            req.onsuccess = ev => resolve(ev.target.result);
            req.onerror = ev => reject(`Failed to open db: ${JSON.stringify(ev)}`);
            req.onupgradeneeded = ev => {
                let db = ev.target.result
                db.createObjectStore(tableName, { keyPath: keyName });
            }
        });
        dbp.then(d => d.onerror = ev => alert("error: " + ev.target.errorCode));
        return dbp;
    },

    /**
     * Write to IndexedDB
     * @param db
     * @param obj example: {keyName: 001, data: ''}
     *
     * @return Promise with saved data with
     */
    async put(db, obj) {
        return new Promise((resolve, reject) => {
            const store = db.transaction([this.tableName], 'readwrite').objectStore(this.tableName);
            const req = store.put(obj);
            req.onsuccess = () => resolve({ [this.keyName]: req.result, ...obj });
            req.onerror = reject;
        });
    },

    /**
     * Read from IndexedDB
     * @param db
     * @param id
     *
     * @return Promise with result
     */
    async get(db, id) { // NOTE: if not found, resolves with undefined.
        return new Promise((resolve, reject) => {
            const docs = db.transaction([this.tableName,]).objectStore(this.tableName);
            const req = docs.get(id);
            req.onsuccess = () => resolve(req.result);
            req.onerror = reject;
        });
    }
}
	import DB from './indexed_db.js'

	document.addEventListener('DOMContentLoaded', async () => {
	const db = await DB.connect('SampleDB', 1, 'sample_table', 'id')
	const saved = await DB.put(db, {id: '000', text: 'Hello, World', date: (new Date()).toISOString() })
	console.log('Saved data', saved)
	const result = await DB.get(db, '000')
	console.log('result', result)
	})
	<html>
	<h1>Indexed DB with Promise</h1>
	Check console log.
	<script src=app.js type=module></script>
	</html>
	export default {
	tableName: '',

	keyName: '',

	/**
	* Create and connect IndexedDB
	* @param dbName
	* @param version
	* @param tableName
	* @param keyName
	*
	* @return Promise with IndexedDB object
	*/
	connect(dbName, version, tableName, keyName) {
	this.tableName = tableName
	this.keyName = keyName
	const dbp = new Promise((resolve, reject) => {
	const req = window.indexedDB.open(dbName, version);
	req.onsuccess = ev => resolve(ev.target.result);
	req.onerror = ev => reject(`Failed to open db: ${JSON.stringify(ev)}`);
	req.onupgradeneeded = ev => {
	let db = ev.target.result
	db.createObjectStore(tableName, { keyPath: keyName });
	}
	});
	dbp.then(d => d.onerror = ev => alert("error: " + ev.target.errorCode));
	return dbp;
	},

	/**
	* Write to IndexedDB
	* @param db
	* @param obj example: {keyName: 001, data: ''}
	*
	* @return Promise with saved data with
	*/
	async put(db, obj) {
	return new Promise((resolve, reject) => {
	const store = db.transaction([this.tableName], 'readwrite').objectStore(this.tableName);
	const req = store.put(obj);
	req.onsuccess = () => resolve({ [this.keyName]: req.result, ...obj });
	req.onerror = reject;
	});
	},

	/**
	* Read from IndexedDB
	* @param db
	* @param id
	*
	* @return Promise with result
	*/
	async get(db, id) { // NOTE: if not found, resolves with undefined.
	return new Promise((resolve, reject) => {
	const docs = db.transaction([this.tableName,]).objectStore(this.tableName);
	const req = docs.get(id);
	req.onsuccess = () => resolve(req.result);
	req.onerror = reject;
	});
	}
	}