删除，功能删除，似乎不起作用

Question

我在博客中关注了本教程，它只是一个使用 indexedDB 的示例教程。我是 indexedDB 的新手，所以我只能理解一点点。

read、readAll 和 add 等其他功能正常运行。虽然功能删除不起作用。这些函数通过按钮调用 onclick。

每当我点击“删除数据”时，按钮就会消失，什么也没有发生。

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="index.js"></script>
  <link rel="stylesheet" type="text/css" href="index.css" media="all">
  <title>Sample IndexedDB</title>
</head>

<body>
    <button onclick="read()">Read </button>
    <button onclick="readAll()">Read all </button>
    <button onclick="add()">Add data </button>
    <button onclick="remove()">Delete data </button>
</body>
</html>

Javascript:

     //prefixes of implementation that we want to test
     window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

     //prefixes of window.IDB objects
     window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
     window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange

     if (!window.indexedDB) {
        window.alert("Your browser doesn't support a stable version of IndexedDB.")
     }

     const employeeData = [
        { id: "00-01", name: "gopal", age: 35, email: "gopal@tutorialspoint.com" },
        { id: "00-02", name: "prasad", age: 32, email: "prasad@tutorialspoint.com" }
     ];
     var db;
     var request = window.indexedDB.open("sampleDB", 3);

     request.onerror = function(event) {
        console.log("error: ");
     };

     request.onsuccess = function(event) {
        db = request.result;
        console.log("success: "+ db);
     };

     request.onupgradeneeded = function(event) {
        var db = event.target.result;
        var objectStore = db.createObjectStore("employee", {keyPath: "id"});

        for (var i in employeeData) {
           objectStore.add(employeeData[i]);
        }
     }

     function read() {
        var transaction = db.transaction(["employee"]);
        var objectStore = transaction.objectStore("employee");
        var request = objectStore.get("00-03");

        request.onerror = function(event) {
           alert("Unable to retrieve daa from database!");
        };

        request.onsuccess = function(event) {
           // Do something with the request.result!
           if(request.result) {
              alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);
           }

           else {
              alert("Kenny couldn't be found in your database!");
           }
        };
     }

     function readAll() {
        var objectStore = db.transaction("employee").objectStore("employee");

        objectStore.openCursor().onsuccess = function(event) {
           var cursor = event.target.result;

           if (cursor) {
              alert("Name for id " + cursor.key + " is " + cursor.value.name + ",\r\nAge: " + cursor.value.age + ",\r\nEmail: " + cursor.value.email);
              cursor.continue();
           }

           else {
              alert("No more entries!");
           }
        };
     }

     function add() {
        var request = db.transaction(["employee"], "readwrite")
        .objectStore("employee")
        .add({ id: "00-03", name: "Kenny", age: 19, email: "kenny@planet.org" });

        request.onsuccess = function(event) {
           alert("Kenny has been added to your database.");
        };

        request.onerror = function(event) {
           alert("Unable to add data\r\nKenny aready exist in your database! ");
        }
     }

     function remove() {
        var request = db.transaction(["employee"], "readwrite")
        .objectStore("employee")
        .delete("00-03");

        request.onsuccess = function(event) {
           alert("Kenny's entry has been removed from your database.");
        };
     }

非常感谢任何形式的帮助。

Answer 1

不确定是否有帮助，但有几点：

您通常不想在数组上使用 for in。 For..in 用于迭代对象的键。使用 for(var i = 0; i < arraylength;i++) 遍历数组。
db.transaction(['store']) 中对象存储周围的括号是可选的。你不需要它们。事实上，您使用它们的方式不一致，因此您的代码很难阅读。
您不应该按照您使用它的方式使用变量 'var db'。单击“删除”时连接可能为空或已关闭。
虽然可以，但我建议不要从 onupgradeneeded 函数中插入数据。需要升级的功能用于创建或修改数据库模式。您应该改用其他功能。通过直接调用其他函数，indexedDB 将自动确定是否需要先调用 onupgradeneeded 然后执行您的函数。
您不再需要像 window.indexedDB = window.indexedDB || window.mozIndexedDB ... 这样的前缀。所有支持 indexedDB 的主要浏览器都删除了这些前缀。只需使用 window.indexedDB
不确定为什么你只在一些函数中处理 request.onerror
您不需要在全局变量前加上前缀 'window'。比如可以直接用indexedDB代替window.indexedDB.
您通常不想在 readAll 函数的上下文中调用 'alert'，该函数在存储上迭代游标。警报正在阻塞。游标迭代是异步的。

无论如何，我最好的猜测是按钮的 onclick 处理程序以某种方式调用 element.remove()，类似于 element.parentNode.removeChild(element)。尝试重命名删除函数。

此外，尝试添加一个 onerror 处理程序来删除，并检查添加后是否可以在开发工具的对象存储中看到该对象。

删除，功能删除，似乎不起作用

Delete, function remove, does not seem to work

html

javascript

indexeddb