Vanilla IndexedDB Recipes... because IndexedDB was designed by Java developers 🙄🙄🙄

count-records.js

/** 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)
  }
}

create-record.js

/** 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')
  }
}

list-object-stores.js

/** 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)
}

Vanilla IndexedDB Recipes

i ♡ indexeddb