objectStore.delete()在IndexedDB上无法正常工作

时间:2018-06-16 12:24:38

标签: javascript indexeddb

我有一个IndexedDB objectStore,它在创建时会收到一些数据(onupgradeneeded),问题是:

我无法移除onupgradeneeded事件中添加的数据,但如果我尝试删除手动添加的数据,则会将其删除而不会出现任何问题

HTML代码:

<button onclick = "readAll()">Read all</button>
<button onclick = "addData()">Add data</button>
<button onclick = "removeData()">Remove data</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index.js"></script>

JS CODE:

// ##### CONNECT TO THE DATABASE (ONUPGRADENEEDED) #####

var db;
var connect_db = window.indexedDB.open("code101", 1);

// The data that will be sent to the objectStore "comandos"
const tabelaDados = [
    { id: "01", name: "comando1", example: "cmd1", description: "Hello World!!!" },
    { id: "02", name: "comando404", example: "cmd404", description: "Yet Another Description..." },
    { id: "03", name: "comando2", example: "cmd2", description: "Lipsum..." }
];

connect_db.onerror = function(event) {
    console.log("Connection error!");
};

connect_db.onsuccess = function(event) {
    db = connect_db.result;
    readAll();
    console.log("Successfully connected.");
};

connect_db.onupgradeneeded = function(event) {
    var db = event.target.result;

    // Create the objectStore "comandos"
    var tabela = db.createObjectStore("comandos", { keyPath: "id" } );

    for (var i in tabelaDados) {
        tabela.add(tabelaDados[i]);
    }
}

// ##### ADD ITEM TO OBJECTSTORE #####

function addData() {
    var name = prompt("Name:");
    var example = prompt("Example:");
    var description = prompt("Description:");

    var addData = db.transaction(["comandos"], "readwrite")
        .objectStore("comandos")
        .add({
            id: Math.floor(Math.random()*1000),
            name: name,
            example: example,
            description: description
        });

    addData.onsuccess = function(event) {
        readAll();
        alert("Item added successfully.");
    };

    addData.onerror = function(event) {
        readAll();
        alert("This item already exists on the objectStore!");
    }
}

// ##### READ ALL DATA ON OBJECTSTORE #####

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

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

        if (cursor) {
            console.log(
                "ID: " + cursor.key +
                "\nName: " + cursor.value.name +
                "\nExample: " + cursor.value.example +
                "\nDescription: " + cursor.value.description
            );
            cursor.continue();
        } else {
            console.log("No more items!");
        }
    };
}

// ##### REMOVE DATA FUNCTION #####

function removeData(item) {
    var removeData = db.transaction(["comandos"], "readwrite").objectStore("comandos").delete(item);

    removeData.onsuccess = function(event) {
        readAll();
        console.log("Item removed successfully.");
    };

    removeData.onerror = function(event) {
        readAll();
        console.log("Error while removing the item.");
    };
}

1 个答案:

答案 0 :(得分:0)

解决了!

removeData()函数上,系统会提示用户插入要删除的项目的ID:

var itemID = prompt("Item ID:");
var removerData = db.transaction(["comandos"], "readwrite").objectStore("comandos").delete(itemID);