使用 IndexedDB，是否可以在 window.indexedDB.open 的 onsuccess 事件中创建对象存储？答案

【问题标题】：With IndexedDB, is it possible to create an object store in the onsuccess event of the window.indexedDB.open?使用 IndexedDB，是否可以在 window.indexedDB.open 的 onsuccess 事件中创建对象存储？
【发布时间】：2020-11-07 00:21:47
【问题描述】：

我正在构建一个应用程序，我想在每次页面加载时尝试从数据库中重新提取数据。如果没有网络连接，我将使用 IndexedDB 中存储的数据。

为此，我认为在 window.indexedDB.open 函数的 onsuccess 事件中清除我们现有的对象存储是有意义的，然后使用新数据重新创建。像这样的：

var request = window.indexedDB.open("offlineInspections",1);
        
request.onsuccess = function(event){    
    db = request.result;
    //Check if connected to network
    //If yes, pull new data
    // TODO (will use AJAX to make a server call)
    
    //Check if current data exists
    //If yes, delete
    if(db.objectStoreNames.contains("user")){
        db.deleteObjectStore("user");
    }
        
    //Load new data
    var userStore = db.createObjectStore("user",{keyPath: "id"}); //Throws error
    var transaction = event.target.transaction;
    
    transaction.oncomplete = function(event){
        console.log('New user store created');
    }
}

当我尝试运行它时，我在上面提到的行中收到以下错误：

未捕获的 DOMException：尝试对不允许突变的数据库进行突变操作。

【问题讨论】：

标签： javascript indexeddb

【解决方案1】：

您只能在 onupgradeneeded 事件处理函数中更改数据库的对象存储和索引，该函数在版本更改读写事务的上下文中运行。

onupgradeneeded 事件处理程序与成功打开请求事件处理程序不同。成功的打开事件处理程序不允许更改对象存储或索引。成功事件仅在升级事务完成后发生。到那时，您正在尝试对不允许突变的数据库（在版本更改事务的上下文之外）进行突变操作（创建/删除对象存储的命令）。

解决方案是使用 onupgradeneeded 处理程序：

var request = indexedDb.open(...);

request.onupgradeneeded = function(event) {
  // do database changes here, e.g.
  var db = event.target.result;
  db.createObjectStore(...);
};

request.onsuccess = function(event) {
  // do database reads/writes here
  // you cannot use createObjectStore here
};

【讨论】：