Skip to content

Instantly share code, notes, and snippets.

@raineorshine
Last active June 12, 2023 14:02
Show Gist options
  • Save raineorshine/611459f527bc874c88ffe61d4ab48a22 to your computer and use it in GitHub Desktop.
Save raineorshine/611459f527bc874c88ffe61d4ab48a22 to your computer and use it in GitHub Desktop.
Vanilla IndexedDB Recipes... because IndexedDB was designed by Java developers πŸ™„πŸ™„πŸ™„
/** Counts the number of records in an object store. */
// let's open the DB. this is about the only part of IndexedDB that makes sense.
const openRequest = indexedDB.open('mydb')
// i've never heard of promises, so let's attach some event handlers
openRequest.onerror = console.error
openRequest.onsuccess = e => {
const db = e.target.result
const storeName = 'myobjectstore'
// let's create a tx object, i'm sure this will come in useful later
const tx = db.transaction(storeName, 'readonly')
// we wouldn't want this to be too easy, let's add another step before you can make a query
const store = tx.objectStore(storeName)
// now we can just call the count function, nice
const countRequest = store.count()
// oh god, more event handlers
countRequest.error = console.error
countRequest.onsuccess = () => {
// obviously the result is added as a side effect to the request object, not passed in the success callback
const count = countRequest.result
console.log(storeName, count)
}
}
/** Adds a record to a new object store. */
// let's open the DB
// to add a new object store, we have to open the database with a version number that is *one-plus the last version number* which is totally easy to keep track of and not a big deal at all
const openRequest = indexedDB.open('mydb', onePlusLastVersionNumber)
// the only place we can create a new object store is in the upgradeneeded event
// this way we get the worst of sql (no ad hoc schemas), but without any of the benefits since this isn't actually sql
openRequest.onupgradeneeded = e => {
const db = e.target.result
db.createObjectStore('myobjectstore')
}
openRequest.onerror = console.error
openRequest.onsuccess = e => {
const db = e.target.result
const storeName = 'myobjectstore'
// a readwrite transaction on our newly created object store
const tx = db.transaction(storeName, 'readwrite')
// we wouldn't want this to be too easy, let's add another step before you can make a query
const store = tx.objectStore(storeName)
// at this point, as a reward for your inexplicable persistence, you are rewarded with the ability to add a record
// let's specify value before key to again avoid being boring
const addRequest = store.add('value', 'key')
// oh god, more event handlers
addRequest.error = console.error
addRequest.onsuccess = () => {
// sit back and relax; this was totally worth a full day's work
console.log('you did it')
}
}
/** Retrieves a list of all object stores on an IndexedDB database. */
// let's open the DB. this is about the only part of IndexedDB that makes sense.
const openRequest = indexedDB.open('mydb')
// i've never heard of promises, so let's attach some event handlers
openRequest.onerror = console.error
openRequest.onsuccess = e => {
// e.target.result is used in DOM handlers, so we might as well use it here as well
const db = e.target.result
// so easy! it's just an array...
// uh, nevermind, it's a DOMStringList which is so much more interesting that boring old aRRaY
const objectStoreNamesArray = [...db.objectStoreNames]
console.log(objectStoreNamesArray)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment