indexeddb - 对索引数据库删除感到困惑

Question

我的场景：

我有一个索引数据库页面，它检索多个文件（图片），每张图片旁边都有一个“删除文件”按钮。此外，每张图片旁边都有复选框，用于删除要删除的多个文件。“删除文件”按钮调用“deleteRecord”函数并将密钥传递给它......它可以很好地删除文件。但是，当批量删除按钮调用相同的“deleteRecord”函数进行批量删除并将密钥传递给它时，不会删除任何文件。'deleteRecord' 贯穿每个键并有一个 onsuccess 事件。但是，什么都没有被删除？

deleteFile 函数（这适用于单个按钮）：

function deleteRecord (id) {
    console.log('inside deleteRecord.  id: ' + id);
    var transaction = db.transaction("patient", "readwrite");
    var objectStore = transaction.objectStore("patient");
    var request = objectStore.delete(id);
    request.onsuccess = function(evt) {
    console.log("It's gone!");
};

它被成功调用：

inputBttn.onclick = function () {
    var prompt = 'Are you sure you want to delete this record?'
    answer = confirm(prompt);
    if (answer) {
    deleteRecord(key);
    console.log('Key = ' + key + ' Record Deleted');
}

并且不成功：

function massDelete() {
    console.log('inside massDelete');
    var checkboxes = document.getElementsByName('c1');                  
    var prompt = 'You are about to delete Multiple Records.  Are you sure?'
    var answer = confirm(prompt);
    if (answer) {
    console.log('Delete confirmed...starting mass delete');
    for (var x = 0; x < checkboxes.length; x++) {
        if (checkboxes[x].checked) {
        var key = checkboxes[x].value;
        console.log('checkbox value = ' + key);
        deleteRecord (key);
    }
};

任何关于为什么会发生这种情况的解释都将不胜感激。

score 2 · Accepted Answer

在尝试了这里的代码之后，我搜索了很长时间以获得答案，有趣的是，它没有被标记为解决方案。Kyaw Tun 的回答对我不起作用，但给了我一些想法。因此，尽管这是一个旧线程，但我会发布一个真正有效的完整解决方案，因为我在网上找不到任何解决这个非常常见问题的东西。我的解决方案是在主干中，所以有一点上下文（主要是this参考）很容易被忽略：

deleteFromDb: function(keys, callback) {
    var _this = this,
        request = indexedDB.open(_this.LOCAL_DB, _this.DB_VERSION);

    request.onsuccess = function(event) {
        var db = event.target.result,
            tx = db.transaction([_this.URL_TABLE], "readwrite"),
            store = tx.objectStore(_this.URL_TABLE),
            recursiveDelete;

        recursiveDelete = function(_index) {
            var deleteRequest;

            // base case
            if (_index >= keys.length) {
                callback();
                return;
            }   
            deleteRequest = store.delete(keys[_index]);
            deleteRequest.onsuccess = function(event) {
                recursiveDelete(_index + 1); 
            }   
        }   
        recursiveDelete(0);
    }   
}

score 0 · Accepted Answer

尝试删除多条记录时，请确保事务保持活动状态。关于这个马歇尔的回答是正确的。
我在删除记录时遇到的另一个问题是，确定键是数字还是字符串。如果您使用了错误的typeof key，则该记录可能不会被删除。

score 0 · Accepted Answer

代码看起来不错，但是我将通过以下方式避免异步循环：

function deleteRecords (ids) {    
  var transaction = db.transaction("patient", "readwrite");
  var objectStore = transaction.objectStore("patient");
  var id = ids.shift();
  var request = objectStore.delete(id);
  request.onsuccess = function(evt) {
    console.log(id + " deleted");
    if (ids.length > 0) {
      id = ids.shift();
      objectStore.delete(id);
    }
  }
  request.onerror = function(evt) {
    console.log(id + " delete fail");
  }
};

score 0 · Accepted Answer

我看不出代码有任何明显错误。一些建议：

在 deleteRecord 中，为完成和中止事件的事务添加一个处理程序，看看哪个被触发：

transaction.onabort = function(e) { console.log("abort"); };
transaction.oncomplete = function(e) { console.log("complete"); };

deleteRecord 缺少右括号，因此它可能不是您正在使用的实际代码。如果您还有其他问题，请考虑将代码的简化版本上传到 jsfiddle。
你在哪些浏览器上试过这个？他们都表现出相同的行为吗？

编辑：key从哪里来inputBttn.onclick？您确定massDelete将正确的值传递给deleteRecord?

score 0 · Accepted Answer

根据 MDN，对象存储在任何给定时间只能打开一个“读/写”事务。该循环将尝试在彼此之上打开多个“读/写”事务，这可能会导致失败。我假设 Chrome 中存在相同的限制。Kyaw Tun 的解决方案应该可以防止多个“读/写”事务，尽管您不需要继续重新打开事务。

链接到 IDBTransaction MDN 参考

indexeddb - 对索引数据库删除感到困惑

5 回答 5

Related

Reference