amon--ra,
Вот работающий пример
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>TEST INDEXEDDB</title>
<style>
input {width:100px;}
</style>
<script>
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB,
IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction,
baseName = "Base_0",
storeName = "Options";
function connectDB(bname){
return new Promise ((res, rej) => {
let request = indexedDB.open(bname, 1);
request.onerror = () => rej (request.error) ;
request.onsuccess = () => res (request.result);
request.onupgradeneeded = function(e){
e.currentTarget.result.createObjectStore(storeName , { keyPath: "id" });
}
})
}
function getRec(db, sname, key){
return new Promise ((res, rej) => {
let request = db.transaction([sname], "readonly").objectStore(sname).get(key);
request.onerror = () => rej (request.error) ;
request.onsuccess = () => res (request.result);
});
}
function addRec(db, sname, value){
return new Promise ((res, rej) => {
let request = db.transaction([sname], "readwrite").objectStore(sname).add(value);
request.onerror = () => rej (request.error) ;
request.onsuccess = () => res (request.result);
});
}
function countRec(db, sname){
return new Promise ((res, rej) => {
let request = db.transaction([sname], "readwrite").objectStore(sname).count();
request.onerror = () => rej (request.error) ;
request.onsuccess = () => res (request.result);
});
}
const dbcount = async ()=> {
let db = await connectDB(baseName)
let n = await countRec(db, storeName)
document.getElementById('dbcount').innerHTML = `Записей в хранилище: ${n}`
}
document.addEventListener('DOMContentLoaded', function init() {
document.getElementById('putbut').onclick = async () => {
const key = document.getElementById('putkey').value
const field1 = document.getElementById('putval1').value
const field2 = document.getElementById('putval2').value
const val = {id: key, field1: field1, field2: field2}
let db = await connectDB(baseName)
await addRec(db, storeName, val)
console.log('Записано : ', val)
document.getElementById('putrestext').innerHTML = `Записано ${key}`
dbcount()
}
document.getElementById('getbut').onclick = async () => {
const key = document.getElementById('getkey').value
let db = await connectDB(baseName)
let val = await getRec(db, storeName, key)
console.log('Прочитано : ', val)
document.getElementById('getrestext').innerHTML =
val? `Прочитано : {id:'${val.id}',field1:'${val.field1}', field2:'${val.field2}'}`
: `Нет записи с ключом '${key}'`
}
dbcount()
});
</script>
</head>
<body>
<section>
<h3 id='dbcount'>
<h3>Запись в базу</h3>
<label>Ключ : <input type="text" id='putkey'></label>
<label>Поле 1 : <input type="text" id='putval1'></label>
<label>Поле 2 : <input type="text" id='putval2'></label>
<button id='putbut'>Записать</button>
<div id=putres>
<h4>Рузультат записи</h4>
<span id='putrestext'></span>
</div>
</section>
<section>
<h3>Чтение из базы</h3>
<label>Ключ : <input type="text" id='getkey'></label>
<button id='getbut'>Прочитать</button>
<div id='getres'>
<h4>Рузультат чтения</h4>
<span id='getrestext'></span>
</div>
</section>
</body>
</html>