CODEWITHSUNDEEP
javascripthtmlindexeddb
Peiqin
Peiqin

Reputation: 89

html5/javascript.Failed to insert data while using indexedDB

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.

Upvotes: 1

Views: 187

Answers (1)

collapsar
collapsar

Reputation: 17258

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.

Upvotes: 1

Related Questions