IndexedDB 事务总是从 Chrome 中的 add() 方法抛出 onabort

Question

我刚开始尝试使用 IndexedDB。我复制了一个示例并将其缩减为一个小 HTML 页面：按下按钮；添加记录；事务完成后将所有记录转储到控制台。

它在 IE11 中运行良好，但在 Chrome 上运行不佳。

request=transaction.objectstore("store").add({k:v})总是执行request.onsuccess()方法，但是事务总是用[解决=23=]() 通过 Chrome。与 .put().

相同

这是代码：

<!DOCTYPE html>
<html>
<head>
<script>
    //--- globals 
    var db;

    // The initialization of our stuff in body.onload()
    function init() {
        var dbVersion = 1;

        //--- Try to delete any existing database
        var delRequest = indexedDB.deleteDatabase("notesDB");
        delRequest.onsuccess = function (de) {
            dbOpen(); // .... then open a new one
        };

        delRequest.onerror = function (de) {
            dbOpen(); // ... or open a new one if one doesn't exist to delete
        };

        function dbOpen () {
            var openRequest = indexedDB.open("notesDB", dbVersion);

            openRequest.onupgradeneeded = function (e) {
                var ldb = e.target.result;
                console.log("running onupgradeneeded; always start with a fresh object store");
                if (ldb.objectStoreNames.contains("note")) {
                    ldb.deleteObjectStore("note");
                }
                if (!ldb.objectStoreNames.contains("note")) {
                    console.log("creating new note data store");
                    var objectStore = ldb.createObjectStore("note", { autoIncrement: true });
                    objectStore.createIndex("title", "title", { unique: false });
                }
            };

            openRequest.onsuccess = function (e) {
                db = e.target.result;

                db.onerror = function (event) {
                    // Generic error handler for all errors targeted at this database
                    alert("Database error: " + event.target.errorCode);
                    console.dir(event.target);
                };
                console.log("Database opened; dump existing rows (shouldn't be any)");
                displayNotes();
            };

            openRequest.onerror = function (e) {
                console.log("Open error");
                console.log(e);
                console.dir(e);
            };
        }

        function displayNotes() {
            console.log("TODO - print something nice on the page");
            var tx = db.transaction("note", "readonly");
            tx.oncomplete = function (event) { console.log("read only cursor transaction complete"); }
            tx.onerror = function (event) { console.log("readonly transaction onerror"); }
            tx.onabort = function (event) { console.log("readonly transaction onabort"); }

            // --- iterate cursor
            console.log("---Start cursor dump---")
            var ds = tx.objectStore("note");
            ds.openCursor().onsuccess = function (event) {
                var cursor = event.target.result;
                if (cursor) {
                    console.log(cursor.key);
                    console.dir(cursor.value);
                    cursor.continue();
                }
                else {
                    console.log("---End cursor dump---");
                }
            };
        }


        document.querySelector("#test").addEventListener("click", function (clickevent) {
            try {
                var transaction = db.transaction("note", "readwrite");
                transaction.oncomplete = function (event) {
                    console.log("Cursor dump in 'add' read/write transaction oncomplete");
                    displayNotes();
                    console.log("add transaction oncomplete done!");
                };
                transaction.onerror = function (event) {
                    console.log("add transaction onerror");
                };
                transaction.onabort = function (event) {
                    console.log("add transaction onabort");
                };

                var objectStore = transaction.objectStore("note");

                var request = objectStore.add({
                    title: "note header",
                    body: "this is random note body content " + Math.floor(Math.random() * 1000)
                });

                request.onsuccess = function (event) {
                    console.log("add request onsuccess");
                };
                request.onerror = function (event) {
                    console.log("add request onerror");
                    console.dir(event);
                };
            }
            catch (e) {
                console.log('catchall exception');
                console.log(e);
                alert("bad things done");
            }

        });
    }
</script>
</head>

<body onload="init()"> 
    <h1>IndexedDB simplest example</h1>
    <p>
        <button id="test">Push To Add Row To IndexedDB</button>
    </p>
</body>
</html>

Answer 1

我点击了很多次按钮，每次都有效。

中止时出现什么错误？在 onabort 处理程序中查看 event.target.error 以查看。它可能是一个 QuotaExceededError，这意味着您的硬盘驱动器 space 非常低，或者您的域的 Chrome 中存储了大量数据。如果是这样，那么您现在运行就很好了，因为您确实需要优雅地处理这种情况，否则用户会点击它并感到困惑。

IndexedDB 事务总是从 Chrome 中的 add() 方法抛出 onabort

IndexedDB transaction always throwing onabort from add() method in Chrome

asynchronous

google-chrome

indexeddb