Удалить, функция remove, не работает

Я следовал этому руководству в блоге, его просто учебник по примерам с использованием indexedDB. Я новичок в indexedDB, поэтому я могу только немного его понять.Удалить, функция remove, не работает

Другие функции, такие как чтение, чтение и добавление, работают правильно. Хотя функция remove не работает. Эти функции называются 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: "[email protected]" }, 
     { id: "00-02", name: "prasad", age: 32, email: "[email protected]" } 
    ]; 
    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: "[email protected]" }); 

     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."); 
     }; 
    }

Любой вид помощи очень высоко ценится.

источник

2016-06-22 mtolingan

Не уверен, если это поможет, но есть несколько вещей:

Вы вообще не хотите использовать для более чем в массиве. For..in для итерации по клавишам объекта. Используйте для (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 только для некоторых ваших функций.
Вам не нужно префикс глобальных переменных с помощью «окна». Например, вы можете напрямую использовать indexedDB вместо window.indexedDB.
Обычно вы не хотите вызывать «предупреждение» в контексте функции readAll, которая выполняет итерацию курсора над хранилищем. предупреждение блокируется. Итерация курсора асинхронна.

Во всяком случае, моя догадка, что как-то обработчик OnClick для кнопки зовёт element.remove() похож на element.parentNode.removeChild(element). Попробуйте переименовать функцию удаления.

Кроме того, попробуйте добавить обработчик onerror для удаления, а также убедитесь, что после добавления вы можете увидеть объект в хранилище объектов в инструментах dev.

источник

2016-06-22 03:10:35 Josh

Привет! Спасибо за ваш ответ. Ваша догадка кажется правильной, и ее переименование исправило это. Кроме того, о моем стиле кодирования, большинство кодов были скопированы из учебника и просто сами пробовали. Я запомню то, что вы указали. – mtolingan

Удалить, функция remove, не работает

ответ

Смежные вопросы