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用于迭代对象的键。用于（var i = 0; i＆lt; arraylength; i ++）迭代数组。
对象存储区周围的括号（如db.transaction（[＆＃39; store＆＃39;]））是可选的。你不需要它们。事实上，你使用它们不一致，所以你的代码难以阅读。
您不应该使用变量＆＃39; var db＆＃39;在你使用它的方式。单击“删除”时，连接可能为空或关闭。
虽然可以，但我建议不要在onupgradeneeded函数中插入数据。升级所需的功能是用于创建或修改数据库模式。你应该使用其他功能。通过直接调用其他函数，indexedDB将自动确定是否需要先调用onupgradeneeded然后执行你的函数。
您不再需要window.indexedDB = window.indexedDB || window.mozIndexedDB ...之类的前缀。支持indexedDB的所有主流浏览器都删除了这些前缀。只需使用window.indexedDB
不确定为什么只在某些功能中处理request.onerror
您不需要在全局变量前加上＆＃39; window＆＃39;。例如，您可以直接使用indexedDB代替window.indexedDB。
您通常不想打电话提醒＆＃39;来自readAll函数的上下文，它将游标迭代在商店上。警报正在阻止。游标迭代是异步的。

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

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

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

1 个答案: