html5/javascript.Failed to insert data while using indexedDB

Question

Here is my code:

function set() {
    var db;
    var request;
    var store;

    var username = document.getElementById("username");
    var password = document.getElementById("password");
    var newuser = {
        "username": username.value,
        "password": password.value,
    };
    var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
    if ('webkitIndexedDB' in window) {
        window.IDBTransaction = window.webkitIDBTransaction;
        window.IDBKeyRange = window.webkitIDBKeyRange;
    }

    request = indexedDB.open("userdb", 1);
    request.onerror = function(event) {};
    request.onsuccess = function(event) {
        db = event.target.result;
        var transaction = db.transaction(["user"], "readwrite");
        var objectStore = transaction.objectStore("user");
        var addrequest = objectStore.add(newuser);
        addrequest.onsuccess = function(event) {
            alert("Success");
        };
    };
    request.onupgradeneeded = function(event) {
        db = event.target.result;
        store = db.createObjectStore("user", {
            keyPath: "username",
            autoIncrement: false
        });
    };
}

After insert data,I use function get() to get data from indexedDB,but I failed to get that,What is the problem?Thank you!

function get() {
    var db;
    var request;
    var store;

    var username = document.getElementById("username");
    var password = document.getElementById("password");
    var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
    if ('webkitIndexedDB' in window) {
        window.IDBTransaction = window.webkitIDBTransaction;
        window.IDBKeyRange = window.webkitIDBKeyRange;
    }

    request = indexedDB.open("userdb", 1);
    request.onerror = function(event) {
        alert("Error Code:" + event.target.errorCode);
    };
    request.onsuccess = function(event) {
        db = event.target.result;
        var transaction = db.transaction("user", IDBTransaction.READ_WRITE);
        var objectStore = transaction.objectStore("user");
        objectStore.get(username.value);
        if (password.value == event.target.result.password)
            alert("Success“);
        else
            alert("Failed");
    };
    request.onupgradeneeded = function(event) {
        alert("Update Success");
    };
}

The function works after click another button to get data.But I failed to get data.I have added newuser(username:1 password:1) to the table user.But I cann't get the data.Why?Thank you for your answer.

collapsar · Accepted Answer · 2016-04-23 11:28:10Z

1

Your code actually does work, though only once for a given username: after the record has been successfully added to the DB, it persists (which is the point in using IndexedDB in the first place), so subsequent attempts to execute set() result in a fail event on the addrequest object. This never shows up in your code as you haven't defined an onerror handler for said request.

Replace ...

addrequest.onsuccess = function(event) {
    alert("Success");
};

... with ...

addrequest.onerror = function(event) {
        if (console && console.log) { console.log("add op: Fail\n"); }
};
addrequest.onsuccess = function(event) {
    if (console && console.log) { console.log("add op: Success\n"); }
};

... and see it happen (I've taken the liberty to replace alert with console output. Open the console by pressing ctrl-j in the browser window).

Tested on Chrome 50.

Update

Change the get function as follows:

Instead of ...

objectStore.get(username.value);
if (password.value == event.target.result.password)
    alert("Success“);
else
    alert("Failed");

... write ...

var getrequest = objectStore.get(newuser.username);
getrequest.onerror = function(event) {
        if (console && console.log) { console.log("get op: Fail\n"); }
};
getrequest.onsuccess = function(event) {
    if (console && console.log) { console.log("get op: Success\n"); }
};

... and it will work.

edited Apr 23, 2016 at 11:28

answered Apr 23, 2016 at 9:39

collapsar

17.4k5 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peiqin Over a year ago

Thank you for you answer.It really is helpful for me.But I have a new question.I can not get the data from indexeddb.Why?I have edited my question!Thanks.

collapsar Over a year ago

It would work if you represented the request object for the get request in your code and attached the success/fail handlers to this object. I've adjusted the answer accordingly.

Collectives™ on Stack Overflow

html5/javascript.Failed to insert data while using indexedDB

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related