如何在按钮事件中使用IndexedDB的deleteObjectStore方法？

我尝试点击删除按钮时删除IndexedDB的对象仓库，在按钮事件监听器里执行代码let transaction = db.deleteObjectStore('names')，但既没删除仓库也没报错。查文档发现deleteObjectStore必须在onupgradeneeded事件处理器中使用，没法在按钮点击事件这类外部场景直接调用。

解决思路 #

要在按钮点击时删除对象仓库，核心是通过升级数据库版本触发onupgradeneeded事件，在该事件内执行删除操作，具体步骤：

• 点击删除按钮时，先关闭当前数据库连接（避免版本升级冲突）
• 以比当前版本更高的版本号重新打开数据库
• 在onupgradeneeded事件中，根据版本差异执行deleteObjectStore操作

修改后的完整代码 #

HTML #

<input type="text" placeholder="Type here">
<button id="add">Add</button>
<button id="delete">Delete</button>
<button id="show">Show</button>

CSS #

button{ 
    margin-left: 10px;
}

JavaScript #

window.addEventListener('load', function() {
    let db;
    let currentVersion = 1;

    // 打开数据库的通用方法
    function openDB(version) {
        let request = indexedDB.open('namesDb', version);
        
        request.onsuccess = function(e) {
            db = e.target.result;
        }

        request.onerror = function(e) {
            alert(e.target.errorCode);
        }

        request.onupgradeneeded = function(e) {
            db = e.target.result;
            // 根据版本判断操作：版本1创建仓库，版本2及以上删除仓库
            if(e.oldVersion < 1) {
                db.createObjectStore('names', {autoIncrement: true});
            }
            if(e.oldVersion < 2) {
                if(db.objectStoreNames.contains('names')) {
                    db.deleteObjectStore('names');
                    alert('对象仓库已删除');
                }
            }
        }
    }

    // 初始化打开数据库
    openDB(currentVersion);
    
    // 添加数据到仓库
    document.querySelector('#add').addEventListener('click', function(e) {
        if(!db || !db.objectStoreNames.contains('names')) return;
        
        let input = document.querySelector('input');
        let transaction = db.transaction(['names'], 'readwrite');
        let names = transaction.objectStore('names');
        let name = {name: input.value};
        names.add(name);
        
        transaction.oncomplete = function(e) {
            alert( `"${input.value}" 已添加`);
            input.value = '';
        }
    
        transaction.onerror = function(e) {
            alert(e.target.errorCode);
        }
    });
    
    // 删除对象仓库的逻辑
    document.querySelector('#delete').addEventListener('click', function(e) {
        if(!db) return;
        
        // 先关闭当前数据库连接
        db.close();
        // 升级版本号，触发onupgradeneeded事件
        currentVersion += 1;
        openDB(currentVersion);
    });
    
    // 展示所有数据
    document.querySelector('#show').addEventListener('click', function(e) {
        if(!db || !db.objectStoreNames.contains('names')) {
            alert('对象仓库不存在');
            return;
        }
        
        let transaction = db.transaction(['names'], 'readonly');
        let names = transaction.objectStore('names');
        let show = '';
        
        names.openCursor().onsuccess = function(e) {
            var cursor = e.target.result;
          
            if (cursor) {
                let key = cursor.key;
                let value = cursor.value.name;
                show += `${key} ${value}\n`;
                cursor.continue();
            }else {
                alert(show || '仓库中无数据');
            }
        };
    });
});

内容的提问来源于stack exchange，提问作者Table