1

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>
4

1 に答える 1

1

古いバージョンの仕様 (setVersion) を使用する場合、データベースのバージョンは文字列値です。これが、ロードするたびにオブジェクト ストアが作成される理由です。以下を入れることをお勧めします。

if (db.setVersion) {
    if (parseInt(db.version) != dbVersion) {
        // Create the structure
    }
}

この実装は、古い Firefox および chrome ブラウザーでのみ機能することに注意してください。ブラウザーの新しいバージョンでは、open メソッドに onupgradeneeded コールバックがあります。詳細については、こちらをご覧ください。

function initializeDB(){             
   var request = indexedDB.open("Customers",dbVersion);              
   request.onerror = function(event){ }; 
   request.onsuccess = function(event){ };
   request.onupgradeneeded = function (e){
      if(e.newVersion == dbVersion){
         var db = e.result;
         if(!db.objectStoreNames.contains("CustDetails")) {
             var objectStore = db.createObjectStore("CustDetails",{ Keypath: "AadharNumber", autoIncrement: true });                                     
             objectStore.createIndex("name", "name",{unique: false});                                 
             objectStore.createIndex("email", "email",{unique: true});

             // ....    
         }
      }
   };
于 2012-10-17T09:29:56.403 に答える