Skip to content

Instantly share code, notes, and snippets.

@maloninc
Last active November 26, 2022 08:53
Show Gist options
  • Save maloninc/fc449b7427639916758faecf7cf4e75a to your computer and use it in GitHub Desktop.
Save maloninc/fc449b7427639916758faecf7cf4e75a to your computer and use it in GitHub Desktop.
Indexed DB with Promise
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;
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment