Last active
November 26, 2022 08:53
-
-
Save maloninc/fc449b7427639916758faecf7cf4e75a to your computer and use it in GitHub Desktop.
Indexed DB with Promise
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) | |
| }) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <h1>Indexed DB with Promise</h1> | |
| Check console log. | |
| <script src=app.js type=module></script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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