1
나는이 튜토리얼을 indexedDB를 사용하는 블로그에서 보았습니다. 나는 indexedDB에 익숙하지 않아 조금만 이해할 수 있습니다.삭제, 함수 제거, 작동하지 않는 것 같습니다
read, readAll 및 add와 같은 기타 기능이 제대로 작동하고 있습니다. 함수 제거가 작동하지 않는 동안. 이러한 기능은 버튼을 통해 onclick이라고합니다.
데이터 삭제를 클릭 할 때마다 버튼이 사라지고 아무런 변화가 없습니다.
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" media="all">
<title>Sample IndexedDB</title>
</head>
<body>
<button onclick="read()">Read </button>
<button onclick="readAll()">Read all </button>
<button onclick="add()">Add data </button>
<button onclick="remove()">Delete data </button>
</body>
</html>
자바 스크립트 : 도움의 모든 종류가 매우 많이 감사합니다
//prefixes of implementation that we want to test
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
//prefixes of window.IDB objects
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB.")
}
const employeeData = [
{ id: "00-01", name: "gopal", age: 35, email: "[email protected]" },
{ id: "00-02", name: "prasad", age: 32, email: "[email protected]" }
];
var db;
var request = window.indexedDB.open("sampleDB", 3);
request.onerror = function(event) {
console.log("error: ");
};
request.onsuccess = function(event) {
db = request.result;
console.log("success: "+ db);
};
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore("employee", {keyPath: "id"});
for (var i in employeeData) {
objectStore.add(employeeData[i]);
}
}
function read() {
var transaction = db.transaction(["employee"]);
var objectStore = transaction.objectStore("employee");
var request = objectStore.get("00-03");
request.onerror = function(event) {
alert("Unable to retrieve daa from database!");
};
request.onsuccess = function(event) {
// Do something with the request.result!
if(request.result) {
alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);
}
else {
alert("Kenny couldn't be found in your database!");
}
};
}
function readAll() {
var objectStore = db.transaction("employee").objectStore("employee");
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
alert("Name for id " + cursor.key + " is " + cursor.value.name + ",\r\nAge: " + cursor.value.age + ",\r\nEmail: " + cursor.value.email);
cursor.continue();
}
else {
alert("No more entries!");
}
};
}
function add() {
var request = db.transaction(["employee"], "readwrite")
.objectStore("employee")
.add({ id: "00-03", name: "Kenny", age: 19, email: "[email protected]" });
request.onsuccess = function(event) {
alert("Kenny has been added to your database.");
};
request.onerror = function(event) {
alert("Unable to add data\r\nKenny aready exist in your database! ");
}
}
function remove() {
var request = db.transaction(["employee"], "readwrite")
.objectStore("employee")
.delete("00-03");
request.onsuccess = function(event) {
alert("Kenny's entry has been removed from your database.");
};
}
.
안녕하세요! 답변 주셔서 감사합니다. 귀하의 추측은 옳은 것처럼 보였으며 이름을 바꿔 고정 시켰습니다. 또한, 코딩 스타일에 관해서는, 대부분의 코드는 튜토리얼에서 복사하여 붙여 넣기 만하면됩니다. 내가 열거 한 것을 메모 해 두겠습니다. – mtolingan