Basic IndexedDB Example

JavaScript

let db 

const addData = () => {
  const transaction = db.transaction(["keys"], "readwrite")
  const objectStore = transaction.objectStore("keys")
  const request = objectStore.add(
    {
      alfa_key: alfa_key.value,
      bravo_key: bravo_key.value
    }
  )

  request.onsuccess = (event) => {
    console.log("TODO: See if this is necessary or if you can just let the transaction close")
  }

  request.onerror = (event) => {
    console.error(event.target.error)
  }

  transaction.oncomplete = (event) => {
    console.log("All done!")
  }

  transaction.onerrer = (event) => {
    console.log(event.target)
  }
}

const startDB = () => {
  const request = indexedDB.open("ExampleKeysDB2", 8)

  request.onsuccess = (event) => {
    console.log("Connected to db")
    db = event.target.result
    showButton()
  }

  request.onerror = (event) => {
    console.error("Could not connect to IndexedDB")
  }

  request.onupgradeneeded = (event) => {
    console.log("Updated database")
    db = event.target.result
    const objectStore = db.createObjectStore("keys", { keyPath: "alfa_key" });
    objectStore.createIndex("bravo_key", "bravo_key", { unique: true })
    objectStore.transaction.oncomplete = (event) => {
      showButton()
    }
  }
}

const showButton = () => {
  const newButton = document.createElement("button")
  newButton.innerText = "Add Data"
  buttonHolder.appendChild(newButton)
  newButton.addEventListener("click", () => addData())
}

document.addEventListener("DOMContentLoaded", () => {
  startDB()
})