HTML5コードを使用して、データベースで作成、追加、削除、および印刷操作を実行できる以下のデータベースを作成しました。ただし、HTML ページをロードするたびに ObjectStore が作成され、ページをリロードすると保存された追加の値が表示されません。コードの何が問題になっていますか? 助けてください。ありがとう。
<html>
<title>
IndexedDB</title>
<script type="text/javascript">
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB;
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
var db;
//var test;
var dbVersion = 1;
(function () {
var Cust_Data = [{name: "ABC", email: "abc@gmail.com"},
{name: "XYZ", email: "xyz@gmail.com"}];
function initializeDB(){
alert("At initialize DB function");
var request = indexedDB.open("Customers",dbVersion);
request.onerror = function(event){
write("Database cannot be opened:" + event.target.errorCode);
};
request.onsuccess = function(event){
db = event.target.result;
if (db.setVersion) {
if (db.version != dbVersion) {
var req = db.setVersion(dbVersion);
req.onerror = db.onerror;
req.onsuccess = function () {
if(db.objectStoreNames.contains("CustDetails")) {
alert("CustDetails store already present!");
}
else{
//alert("Initialize else function");
var objectStore = db.createObjectStore("CustDetails",{ Keypath: "AadharNumber", autoIncrement: true });
objectStore.createIndex("name", "name",{unique: false});
objectStore.createIndex("email", "email",{unique: true});
for(i in Cust_Data){
objectStore.add(Cust_Data[i]);
}
}
};
}
else{
alert("Not created ObjectStore");
}
}
};
}
function contentLoaded(){
alert("At contentLoaded function");
initializeDB();
//db = initializeDB();
//db = test.indexedDB.db;
alert("Value of db in contentLoaded function is :" + db);
var btnAdd = document.getElementById("btnAdd");
var btnDelete = document.getElementById("btnDelete");
var btnPrint = document.getElementById("btnPrint");
btnAdd.addEventListener("click", function(){
alert("At add function");
//alert("Value of db in add function is :" + db);
var name = document.getElementById("txtName").value;
var email = document.getElementById("txtEmail").value;
var transaction = db.transaction("CustDetails",IDBTransaction.READ_WRITE);
//alert("Transaction statement passed");
var objectStore = transaction.objectStore("CustDetails");
var request = objectStore.add({name: name, email: email});
request.onsuccess = function(event){
alert ( "Added to the database");
document.getElementById("txtName").value = "";
document.getElementById("txtEmail").value = "";
};
},false);
btnDelete.addEventListener("click", function(){
//alert("At Delete function");
//var AadharNumber = document.getElementById("AadharNumber").value;
var AadharNumber = parseInt(document.getElementById("AadharNumber").value);
var transaction = db.transaction("CustDetails",IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore("CustDetails");
var request = objectStore.delete(AadharNumber);
request.onsuccess = function(event){
alert( "Aadhar Number: "+ AadharNumber + " deleted from the database");
};
},false);
btnPrint.addEventListener("click", function () {
var output = document.getElementById("printOutput");
output.textContent = "";
var transaction = db.transaction("CustDetails", IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore("CustDetails");
var request = objectStore.openCursor();
request.onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
output.textContent += "Aadhar Number: " + cursor.key + " is " + cursor.value.name + "";
cursor.continue();
}
else {
console.log("No more entries!");
}
};
}, false);
}
window.addEventListener("DOMContentLoaded", contentLoaded, false);
}
)();
</script>
<body><center>
<div id="container">
<label for="txtName">
Name:
</label>
<input type="text" id="txtName" name="txtName" />
<br />
<label for="txtEmail">
Email:
</label>
<input type="text" id="txtEmail" name="txtEmail" />
<br />
<input type="button" id="btnAdd" value="Add Record" />
<br />
<label for="AadharNumber">
ID:
</label>
<input type="text" id="AadharNumber" name="txtAadharNumber" />
<input type="button" id="btnDelete" value="Delete Record" />
<br />
<input type="button" id="btnPrint" value="Print Records" />
<br />
<output id="printOutput" > </output>
</div>
</center>
</body>
</html>