Chrome 扩展 IndexedDB 删除功能不起作用答案

【问题标题】：Chrome Extension IndexedDB delete function does not workChrome 扩展 IndexedDB 删除功能不起作用
【发布时间】：2023-03-13 01:44:01
【问题描述】：

这一切都在 Chrome 扩展程序中被调用，使用 indexedDB。

我不会编写我的 HTML，因为它是简单的标记，但是，如果需要，请告诉我。

这里有问题的代码在 request.onsuccess 函数内的 IF 语句中：

if (getQueryVariable("deleteid") != "") {
    removeFilter(id); // This
};

在 if 语句中，我可以使用“getQueryVariable(“deleteid”)”直接从 URL 获取我的 ID，并将 id “2”硬编码到我的函数 removeFilter(2) 中，但是使用“ var id = getQueryVariable("deleteid").toString(); 在 removeFilter(id) 中没有“代码 cmets 中的进一步示例。

//
//The code below works, except the functions in question inside the IF statements
//
document.addEventListener("DOMContentLoaded", function (event) {
    if (!window.indexedDB) {
        window.alert("Something went wrong");
    };
    var request = indexedDB.open('filterDB', 3);
    request.onupgradeneeded = function (e) {
        var db = e.target.result;

        if (!db.objectStoreNames.contains('filters')) {
            var os = db.createObjectStore('filters', { keyPath: "id", autoIncrement: true });
            //create index for name
            os.createIndex('name', 'name', { unique: false });
        };
    };
    //success
    request.onsuccess = function (e) {
        console.log('Success: Opened DB');
        db = e.target.result;
        //Show Content
        showFilters();
        // The function removeFilter() is only supposed to be called once and the commented functions are just examples
        if (getQueryVariable("deleteid") != "") {   // the URL reads popup.html?deleteid=2
            var id = getQueryVariable("deleteid").toString(); // id = 2
            removeFilter(id); // calls the onsuccess function, but doesnt delete anything 
            //removeFilter(getQueryVariable("deleteid").toString()); // same deal
            //removeFilter(2); // Deletes Item with id = 2, so the function works with a hardcoded ID
            //alert(getQueryVariable("deleteid").toString()); // alerts id = 2
            //alert(id); // alerts id = 2
            window.location.href = "popup.html";
        };
        
    };
    //Error
    request.onerror = function (e) {
        console.log('Error, Could not open DB');
    };
    document.getElementById("FilterAdd").onclick = function () {
        addFilter();
        showFilters()
        document.getElementById("filtername").value = "";
        document.getElementById("tags").value = "";
    };
});
// My delete function
function removeFilter(id) {
    var transaction = db.transaction(['filters'], 'readwrite');
    var store = transaction.objectStore("filters");
    var request = store.delete(id);
    //success and error callbacks
    request.onsuccess = function (e) {
        db = e.target.result;
        console.log("Filter " + id + " deleted");
    };
    request.onerror = function (e) {
        alert("Sorry, the filter wasnt removed");
        console.log('Error ', e.target.error.name);
    };
};
// Getting the id from URL function
function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }
    }
    return (false);
}

如果我能够将“2”硬编码到函数 removeFilter(2) 中并且有效，那么变量 var id = getQueryVariable("deleteid").toString();也可以工作，因为它在 "alert(id)" 中返回 "2" ？

我是 Javascript 的新手，我一直在努力解决这个问题

很抱歉，如果这个问题已经被提出来了，我试图寻找但没有找到任何东西。

【问题讨论】：

标签： javascript indexeddb

【解决方案1】：

在摆弄了这么多不同的方法来解决我的问题之后，我最终发现我只需要将我的 getQueryVariable("deleteid").toString() 转换为一个整数，因为我的函数 removeFilter() 需要一个 int .这么简单的写

removeFilter(parseInt(id));

工作..耶

不知道它是否对任何人有帮助.. 但它就在那里..

【讨论】：