21.03.2020, 14:45
|
 |
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,777
|
|
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>
Последний раз редактировалось voraa, 21.03.2020 в 15:06.
|
|
21.03.2020, 14:53
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
voraa,
строка 76 фигурной скобки не хватает в конце, и может так ...
val? `Прочитано : ${JSON.stringify(val, "", 4)}`
|
|
21.03.2020, 15:11
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,777
|
|
Сообщение от рони
|
voraa,
строка 76 фигурной скобки не хватает в конце, и может так ...
val? `Прочитано : ${JSON.stringify(val, "", 4)}`
|
Спасибо, скобку поставил.
Можно и JSON.stringify, разумеется.
Меня просто раздражают название полей в кавычках, там, где можно без них обойтись.
Но это только мое личное мнение. |
|
21.03.2020, 17:03
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
|
|
22.03.2020, 15:59
|
|
Новичок на форуме
|
|
Регистрация: 17.03.2020
Сообщений: 6
|
|
Доброго времени суток.
Вот весь код.
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB,
IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction,
baseName = "Base_0",
storeName = "Options";
storeName1 = "List";
let f = function() {};
let Rec = {};
function logerr(err){
console.log(err);
}
function connectDB(f){
var request = indexedDB.open(baseName, 1);
request.onerror = logerr;
request.onsuccess = function(){
f(request.result);
}
request.onupgradeneeded = function(e){
e.currentTarget.result.createObjectStore(storeName , { keyPath: "id" });
e.currentTarget.result.createObjectStore(storeName 1, { keyPath: "path" });
connectDB(f);
}
}
function getRec(Rec, f){
connectDB(function(db){
var request = db.transaction([storeName], "readonly").objectStore(storeName).get(id=0);
request.onerror = logerr;
request.onsuccess = function(){
Rec = request.result;
console.log(Rec);
f(request.result ? request.result : -1);
}
});
}
function getStorage(f){
connectDB(function(db){
var rows = [],
store = db.transaction([storeName], "readonly").objectStore(storeName);
if(store.mozGetAll)
store.mozGetAll().onsuccess = function(e){
f(e.target.result);
};
else
store.openCursor().onsuccess = function(e) {
var cursor = e.target.result;
if(cursor){
rows.push(cursor.value);
cursor.continue();
}
else {
f(rows);
}
};
});
}
function setRec(Rec){
connectDB(function(db){
var request = db.transaction([storeName], "readwrite").objectStore(storeName).put({Value : Rec, "id": 0});
request.onerror = logerr;
request.onsuccess = function(){
return request.result;
}
});
}
function delRec(Rec){
connectDB(function(db){
var request = db.transaction([storeName], "readwrite").objectStore(storeName).delete(Rec );
request.onerror = logerr;
request.onsuccess = function(){
console.log("Record delete from DB:", Rec);
}
});
}
document.addEventListener('DOMContentLoaded', function init() {
connectDB(f);
//Rec.width = 500;
//setRec(Rec);
//console.log(Rec);
getRec(Rec, f);
console.log(Rec);
}, false);
|
|
22.03.2020, 17:48
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,777
|
|
let Rec = {};
//........
//.......
*!*function getRec(Rec, f)*/!*{
connectDB(function(db){
var request = db.transaction([storeName], "readonly").objectStore(storeName).get(id=0);
request.onerror = logerr;
request.onsuccess = function(){
*!*Rec = request.result;*/!*
console.log(Rec);
f(request.result ? request.result : -1);
}
});
}
//........
//.......
getRec(Rec, f);
И чему по вашему должен быть Rec после getRec(Rec, f)?
По моему {}.
Причем, console.log(Rec) должен выводить
{Value : {width:500}, id: 0}
(Если при записи были раскоментарены строки
//Rec.width = 500;
//setRec(Rec);
)
Параметр Rec в getRec и Rec = request.result; вообще не нужны
Сделайте так
function getRec( f){
connectDB(function(db){
var request = db.transaction([storeName], "readonly").objectStore(storeName).get(id=0);
request.onerror = logerr;
request.onsuccess = function(){
console.log(request.result);
f(request.result ? request.result : -1);
}
});
}
а вызов
getRec(res => Rec = res);
console.log(Rec);
Последний раз редактировалось voraa, 22.03.2020 в 18:36.
|
|
|
|
