How to deal with IndexedDB?

Question

JavaScript

Demo (Codepen)
Decided to deal with indexedDB. opened the book and began to read. It seems to be more or less clear at first.
I rewrote the code from the book, but this miracle does not want to start.
It feels like the code doesn't seem right at all, at least in terms of syntax...maybe it's out of date. In addition, I did not find the version setting method in the IDBDatabase object. Apparently it is no longer there.
At first the error that db was not found took off. Okay ... I made the variable global, it's not the best practice anymore ...
Then an error began to appear in the console:

Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.

In general, the version check obviously no longer works. By default, the database was given a version number of 1.
Due to this "version check", therefore, no further code is executed ... the store is not created, and the transaction is not carried out ... because the store, in fact, does not exist. there is no one to call methods.
Tell me how to rewrite this code to the current syntax, how to start this repository in general ...

The code

let db;

function initiate() {
  let databox = document.querySelector("#databox");
  let button = document.querySelector("#save");

  button.addEventListener("click", addObject, false);

  let request = indexedDB.open("mydatabase", 1);

  request.addEventListener("error", showerror, false);
  request.addEventListener("success", start, false);
}

function showerror(event) {
  alert(`Error: ${event.code} ${event.message}`);
}

function start(event) {
  console.log("start");

  db = event.result || event.target.result;

  console.log(db); // IDBDatabase {}

  if (db.version == "") {
    let request = db.setVersion("1.0");

    request.addEventListener("error", showerror, false);
    request.addEventListener("success", createDB, false);
  }
}

function createDB() {
  console.log("createDB");

  let objectStore = db.createObjectStore("movies", { keyPath: "id" });

  console.log(objectStore);

  objectStore.createIndex("SearchYear", "data", { unique: false });
}

function addObject() {
  console.log("addObject");

  let keyword = document.querySelector("#keyword").value;
  let title = document.querySelector("#text").value;
  let year = document.querySelector("#year").value;
  let transaction = db.transaction(["movies"], IDBTransaction.READ_WRITE);
  let objectStore = transaction.objectStore("movies");
  let request = objectStore.add({
    id: keyword,
    name: title,
    date: year
  });

  request.addEventListener("success", () => {
    show(keyword);
  }, false);

  document.querySelector("#keyword").value = "";
  document.querySelector("#text").value = "";
  document.querySelector("#year").value = "";
}

function show(keyword) {
  console.log("show");

  let transaction = db.transaction(["movies"]);
  let objectStore = transaction.objectStore("movies");
  let request = objectStore.get(keyword);

  request.addEventListener("success", showList, false);
}

function showList(event) {
  console.log("showList");

  let result = event.result || event.target.result;

  databox.innerHTML = `<div>${result.id} - ${result.bane} - ${result.date}</div>`;
}

window.addEventListener("load", initiate, false);

Answer 1

i use localForage library
conveniently and simply
https://localforage.github.io/localForage/

Answer 2

Isn't it on codepen? It seems to work right? Or I misunderstood...

Answer 3

I had the same error, I changed the database name to lowercase and everything worked, although in this case the database name is already in lowercase ...
here is a similar problem: https://github.com/localForage/localForage/issues/ 91