为什么在使用indexedDB时没有调用我的onsuccess / onerror回调？ [英] Why are my onsuccess/onerror callbacks not called when using indexedDB?

问题描述

我正在尝试创建一个登录表单。我在db中有一些用户名（对象）。我创建了一个表单，它接受提交的用户名（主键）并检查它是否在数据库中。但是，在信息通过我的loginCheck（）方法后，页面只刷新并且没有运行成功，也没有运行我设置为调试的失败警报

Im trying to create a login form. I have a few usernames (objects) in the db. I've created a form which takes the user name submitted (primary key) and checks if it's in the db. However after the information passes through my loginCheck() method the page just refreshes and doesn't run the success nor the failed alerts I set to debug

JS：

//-------------USER DB------------------//
function startDB(){
    //sign in page elements
    logUser = document.getElementById('logUserName');
    logPass = document.getElementById('logPass');
    signin = document.getElementById('signin');
    signin.addEventListener('click',getLogin);

    //register page elements
    mainForm = document.getElementById('mainFormSidebar');
    mainForm.addEventListener('submit',addObject);
    fname = document.getElementById('fName');
    lName = document.getElementById('lName');
    users = document.getElementById('uName');
    pass = document.getElementById('password');
    email = document.getElementById('email');
    dob = document.getElementById('dob');
    phone = document.getElementById('phone');
    bio = document.getElementById('bio');
    terms = document.getElementById('terms');
    school = document.getElementById('school');
    gender = document.getElementsByName('gender');
    save = document.getElementById('save');
    reset = document.getElementById('reset'); 
    reset.addEventListener('click',clearForm);
    databox = document.getElementById('databox');



    //open DB
    var request = indexedDB.open('macroPlay'); 
    //if fails
    request.addEventListener('error', showerror); 
    //if succeeds
    request.addEventListener('success', start); 
    //if !exist, create.
    request.addEventListener('upgradeneeded', createdb); 

    //Create Admin account on launch

}
function showerror(e){
    alert('Error: ' + e.code + ' - ' + e.message);
}
function start(e){
    db = e.target.result;
    chkAdmin();
    showUsers();// Show all values in the object store
}
function createdb(e){
    var datababase = e.target.result;
    var myusers = datababase.createObjectStore('users', {keyPath: 'userName'});
}
function addObject(){
    if(confirm('Are you sure you want to resgister?')){
        var fName = document.getElementById('fName').value;
        var lName = document.getElementById('lName').value;
        var userName = document.getElementById('uName').value;
        var pass = document.getElementById('password').value;
        var email = document.getElementById('email').value;
        var dob = document.getElementById('dob').value;
        var phone = document.getElementById('phone').value;
        var bio = document.getElementById('bio').value;
        var terms = document.getElementById('terms').value;
        var school = document.getElementById('school').value;

        //May need to set a loop to find value of radio
        var gender;
        var radios = document.getElementsByName('gender');

        for (var i = 0, length = radios.length; i < length; i++) {
            if (radios[i].checked) {
                gender=radios[i].value;
            }
        }

        //set up transaction
        var mytransaction = db.transaction(['users'], "readwrite"); 

        //get object store
        var myusers = mytransaction.objectStore('users'); 

        //Add item
        var request = myusers.add(new getUser(userName,fName,lName,pass,email,dob,phone,bio,terms,school,gender));
    }

    // Show all results.
    mytransaction.addEventListener('complete', showUsers);  

    //Reset Form Fields
    resetForm();


}
function getUser(userName, fn, ln, pw, em, dob, tel, bio,tm, scl, gender){
    this.userName = userName;
    this.fn = fn;
    this.ln = ln;
    this.pw = pw;
    this.em = em;
    this.dob = dob;
    this.tel = tel;
    this.bio = bio;
    this.tm = tm;
    this.scl = scl;
    this.gender = gender;
}
function showUsers(){
    //reset box
    databox.innerHTML = ''; 
    //set the transaction 
    var mytransaction = db.transaction(['users']);
    //get object store
    var myusers = mytransaction.objectStore('users');
    //open the cursor and set an order
    var newcursor = myusers.openCursor(null,"prev");
    //show all users on successful load of DB
    newcursor.addEventListener('success',showUserList);
}
function showUserList(e){
    //var result = e.target.result;
    //databox.innerHTML = '<div>' + result.id + ' - ' + result.name + ' - ' + result.date + '</div>';
    var cursor = e.target.result; // Capture multiple return values as a cursor
    // Modify the databox to show the results 
    if (cursor){
   /*
        databox.innerHTML = '<div>' + 
           'Username'+ ' - ' + 
           'First'+ ' - ' + 
           'Last'+ ' - '+ 
           'Pass'+ ' - '+ 
           'Email'+ ' - '+ 
           'DOB'+ ' - '+
           'TEL'+ ' - '+ 
           'BIO'+ ' - '+ 
           'NEWS'+ ' - '+
           'TOS'+ ' - '+
           'SCL'+' - '+
           'Gender </div>';
   */

        databox.innerHTML += '<div>' + 
        cursor.value.userName + ' - ' + 
        cursor.value.fn+ ' - ' + 
        cursor.value.ln+ ' - '+ 
        cursor.value.pw+ ' - '+ 
        cursor.value.em+ ' - '+ 
        cursor.value.dob+ ' - '+
        cursor.value.tel+ ' - '+ 
        cursor.value.bio+ ' - '+ 
        cursor.value.tm+ ' - '+
        cursor.value.scl+' - '+
        cursor.value.gender+ 
        ' <input type="button" onclick="removeobject(\'' + cursor.value.userName + '\')" value="remove"/></div>';
            // Add a remove button as inserted HTML
        cursor.continue(); // Iterates over the cursor
    }
}
function removeobject(keyword){
    // Confirm the deletion
    if(confirm('Are you sure?')){ 
        // Set the transaction
        var mytransaction = db.transaction(['users'], "readwrite"); 
        // Get the object store
        var mystore = mytransaction.objectStore('users'); 
        // Delete the record with the chosen index
        var request = mystore.delete(keyword); 
        // If success, show the updated results
        mytransaction.addEventListener('complete', showUsers); 
    }
}

//reset functions
function clearForm(){
    //Clear form
    if(confirm('Clear all fields?')){
        resetForm();
    }
    showUserList();    
}
function resetForm(){
    //Reset form
    fname = document.getElementById('fName').value='';
    lName = document.getElementById('lName').value='';
    uName = document.getElementById('uName').value='';
    pass = document.getElementById('password').value='';
    email = document.getElementById('email').value='';
    dob = document.getElementById('dob').value='';
    phone = document.getElementById('phone').value='';
    bio = document.getElementById('bio').value='';
    nl = document.getElementById('nl').value='';
    terms = document.getElementById('terms').checked = false;
    school = document.getElementById('school').value='';
    gender = document.getElementsByName('gender').value='';
    showUserList();    
}


//------Create Admin Account-----//
function chkAdmin(){ 
     if(localStorage.getItem('admin')!="added"){             
        alert('Adding administrator Account');
        addAdmin();
    }
}
function addAdmin(){
    //set up transaction
        var mytransaction = db.transaction(['users'], "readwrite"); 
    //get object store
        var myusers = mytransaction.objectStore('users'); 
        var request = myusers.add(new getUser('admin','Shawn','Smith-Chao','admin'));  
        request.addEventListener('success',showUsers);   
    //Locally store that admin as been created  
        var admin = 'admin'; 
        var value = 'added';
        newItem(admin,value); 
}


//--------Retrieve User Date---------//
function getLogin(){
    alert('getLogin launched');
    var user = logUser.value;
    var pass = logPass.value;  
    alert('User: '+user+'  Pass: '+pass+"   sent to loginCheck");
    loginCheck(user,pass);
    alert ('user/pass checked');
}

function loginCheck(user,pass){
    var transaction = db.transaction(['users']);   
    var mystore = transaction.objectStore('users');  
    alert('User table opened');
    var request = transaction.get(user);
    alert('passed the get user request');
    request.onerror = function (event){
        alert("username does not exist");
    };
    request.onsuccess =function (event){
         alert('request was successful');
        /*alert("Welcome "+ request.result.userName);*/
        //run function populating all fields

    }
}

我在start（e）函数中发出警报，似乎是在显示警告的警报后立即调用用户/通行证。我环顾四周，我无法弄清楚是什么一直在呼唤它。

I put an alert at the start(e) function and it seems to be getting called right after the alert that displays the user/pass. Im looking around I can't figure out what keeps calling it.

此外，如果我将loginCheck更改为此，则会运行警报并且代码会进一步发出警报（'user / pass checked'）;但接着开始（e）再次召唤。

Also, if I change my loginCheck to this, the alert runs and the code progresses a bit further alert ('user/pass checked'); but then start(e) get's called yet again.

推荐答案

indexeddb API异步工作，这就是警报没有按照您的思路显示的原因。因为API是异步的，所以在等待异步调用完成时，所有其他代码都会执行。

The indexeddb API works asynchronous, that is why the alerts don't show up in the order you are thinking. Because the API is asynchronous means that all other code will execute while you are waiting for the asynchronous call to finish.

这篇关于为什么在使用indexedDB时没有调用我的onsuccess / onerror回调？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！