Demo (Codepen)
Решил разобраться с indexedDB. открыл книгу, начал читать. Вроде как более менее понятно по началу.
Переписал код с книги, но запускаться сие чудо не хочет.
Такое чувство, что кажется что код вообще не правильно написан, по крайней мере с точки зрения синтаксиса...возможно он устарел. К тому же метода установки версии я в объекте IDBDatabase не нашел. Видимо его уже и нет там.
Сначала вылетала ошибка что db не найдена. Ладно...сделал переменную глобальной, уже не лучшая практика пошла...
Далее начала в консоль вылетать ошибка:
Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.
В общем, проверка версии явно уже не работает. По умолчанию базе присвоен был номер версии 1.
Из за этой "проверки версии", следовательно дальнейший код не выполняется...хранилище не создается, и транзакция не осуществляется...так как хранилища по сути то и нет. вызывать методы не у кого.
Подскажите как переписать данный код на актуальный синтаксис, как вообще запустить это хранилище...
Код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);
