首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Onupgradeneeded触发时等待IndexedDB打开

在IndexedDB中,当数据库版本发生变化时,会触发onupgradeneeded事件。在该事件中,我们可以执行一些数据库结构的变更操作,例如创建新的对象存储空间或索引。

要在onupgradeneeded触发时等待IndexedDB打开,可以使用Promise对象来实现异步操作的同步化。以下是一个示例代码:

代码语言:txt
复制
function openDatabase() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDatabase', 2);

    request.onupgradeneeded = event => {
      const db = event.target.result;

      // 在这里执行数据库结构的变更操作
      // 例如创建新的对象存储空间或索引

      // 完成数据库结构变更后,关闭数据库连接
      db.close();
    };

    request.onsuccess = event => {
      const db = event.target.result;
      resolve(db);
    };

    request.onerror = event => {
      reject(event.target.error);
    };
  });
}

async function waitForDatabaseOpen() {
  let db;

  try {
    db = await openDatabase();
  } catch (error) {
    console.error('Failed to open database:', error);
    return;
  }

  // 在这里可以执行需要等待数据库打开后的操作
  // 例如执行数据的读取、写入等操作
}

waitForDatabaseOpen();

在上述代码中,openDatabase函数返回一个Promise对象,用于打开IndexedDB数据库。在onupgradeneeded事件中,我们可以执行数据库结构的变更操作,并在完成后关闭数据库连接。在onsuccess事件中,我们将打开的数据库实例传递给resolve函数,以便在waitForDatabaseOpen函数中进行后续操作。

waitForDatabaseOpen函数使用async/await语法来等待数据库打开,并在打开后执行需要等待的操作。你可以在注释的位置执行数据的读取、写入等操作。

请注意,以上代码仅为示例,实际使用时需要根据具体情况进行适当的修改和错误处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • IndexedDB使用与出坑指南

    我们主要介绍: 数据库操作 数据表操作 数据操作 数据库操作 创建或打开数据库 使用IndexedDB第一步,就是创建或打开一个数据库。...而在数据库创建或者版本更新,会触发onupgradeneeded事件。 更新数据库版本号 window.indexedDB.open的第二个参数即为版本号。在不指定的情况下,默认版本号为1。...此时我们指定一个高于之前版本的版本号,就会触发onupgradeneeded事件。类似的,当此数据库不存在,也会触发此事件并且将版本更新到置顶版本。...但是,它不能是一个小数,否则它将会被转为最近的整数,同时有可能导致onUpgradeneeded事件不触发(bug)。...访问权限 部分浏览器Safari手机版隐私模式在访问IndexedDB,可能会出现由于没有权限而导致的异常(LocalStorage也会),需要进行异常处理。

    7.9K53

    【javascript】谈谈HTML5—Web Worker+canvas+indexedDB+拖拽事件

    正是我们想要的图片 indexedDB — — H5的“浏览器数据库” indexedDB是存在于浏览器中的数据库,它和一般的数据库一样有写改删查的功能,不同之处在于:常见的数据库一般是在服务器上,并且要求我们的应用在线才可以工作...onerror  创建/打开数据库发生错误的时候调用 onupgradeneeded 数据库版本变化的时候调用 (onupgradeneeded 是我们唯一可以修改数据库结构的地方) open一个indexedDB...要在onupgradeneeded回调中运行 (很显然每次打开都会被调用的onsuccess并不适合用于初始化数据库结构) indexedDB的具体操作 首先说一下,在下面的展示例子中,我们的HTML是这样的...发生在可放置(droppable)的元素上, 当某被拖动的对象在可放置对象范围内(上方)触发此事件 3. ondrop  发生在可放置(droppable)的元素上,当释放鼠标使可拖拽元素“放进”可放置元素内的瞬间触发...appendChild之类的API实现添加被拖拽的元素,从而模拟整个拖拽的过程 也就是说, 拖拽其实可分为三个过程: 拖动—传递被拖动元素的数据(id)—在容器元素中添加该元素 关键在于如何在被拖动元素和被放置元素中传递数据

    3.7K100

    【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

    正是我们想要的图片 indexedDB — — H5的“浏览器数据库” indexedDB是存在于浏览器中的数据库,它和一般的数据库一样有写改删查的功能,不同之处在于:常见的数据库一般是在服务器上,并且要求我们的应用在线才可以工作...onerror  创建/打开数据库发生错误的时候调用 onupgradeneeded 数据库版本变化的时候调用 (onupgradeneeded 是我们唯一可以修改数据库结构的地方) open一个indexedDB...要在onupgradeneeded回调中运行 (很显然每次打开都会被调用的onsuccess并不适合用于初始化数据库结构) indexedDB的具体操作 首先说一下,在下面的展示例子中,我们的HTML是这样的...发生在可放置(droppable)的元素上, 当某被拖动的对象在可放置对象范围内(上方)触发此事件 3. ondrop  发生在可放置(droppable)的元素上,当释放鼠标使可拖拽元素“放进”可放置元素内的瞬间触发...appendChild之类的API实现添加被拖拽的元素,从而模拟整个拖拽的过程 也就是说, 拖拽其实可分为三个过程: 拖动—传递被拖动元素的数据(id)—在容器元素中添加该元素 关键在于如何在被拖动元素和被放置元素中传递数据

    3.1K30

    indexedDB 基本使用

    它通过索引(index)所产生的指针(cursor)来完成查询操作 一、使用indexedDB的基本模式 打开数据库并且开始一个事务。 创建一个 objecStore。...通过监听正确类型的 DOM 事件以等待操作完成。...若是已存在名为DB_NAME的数据库, 则上述代码会打开该数据库; 只触发success/error事件,不会触发upgradeneeded事件. db是对该数据库的引用....三、创建对象存储空间和索引 在关系型数据库(mysql)中,一个数据库中会有多张表,每张表有各自的主键、索引等; 在key-value型数据库(indexedDB)中, 一个数据库会有多个对象存储空间...总结 使用indexedDB.open(dbName, version)打开一个数据库连接 使用indexedDB.deleteDatabase(dbName)删除一个数据库 在数据库对象db上使用createObjectStore

    1.6K100

    javascript 操作浏览器数据库IndexedDB

    IndexedDB 操作不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。3 支持事务。...使用 IndexedDB 数据库的第一步是调用 indexedDB.open()方法,并给它传入一个要打开的数据库名称。...如果给定名称的数据库已存在,则会发送一个打开它的请求;如果不存在,则会发送创建并打开这个数据库的请求。...如果数据库存在,而你指定了一个升级版的版本号,则会立即触发 upgradeneeded 事件,因而可以在事件处理程序中更新数据库模式。...Firefox 还有一个限制——本地文本不能访问 IndexedDB 数据库。Chrome 没有这个限制。因此在本地运行本书示例,要使用 Chrome。

    18620

    IndexedDB 基础

    "; const DBVersion = 1; const request = indexedDB.open(DBName, DBVersion); request.onupgradeneeded =...基本模式 IndexedDB 鼓励使用的基本模式如下所示: 打开数据库并且开始一个事务 创建一个 object store 构建一个请求来执行一些数据库操作,像增加或提取数据等 通过监听正确类型的 DOM...事件以等待操作完成 在操作结果上进行一些操作(可以在 request 对象中找到) IndexedDB 的使用 创建一个 IndexedDB 数据库 使用 IndexedDB 的第一步是打开数据库,使用...要创建一个对象仓库必须在 upgradeneeded 事件中,而 upgradeneeded 事件只会在版本号更新,或者第一次创建的时候触发。...userId', autoIncrement: false}); console.log('创建对象仓库成功'); } } 通过监听 upgradeneeded 事件,并在这个事件触发使用

    57720

    浏览器里的本地数据库:IndexedDB

    IndexedDB 中有版本概念,这就规定了同一刻下只有一个版本的数据库存在。 对象仓库:对象仓库 ObjectStore 在 IndexedDB 中对应的是 MYSQL 中的表 Table。...('您的浏览器不支持 IndexedDB') // todo 建议升级或者更换其他浏览器 } 连接数据库 // 数据库实例 let db; // 数据库打开操作,第一个参数是数据库名称, 第二个参数是数据库版本...) { // 获取数据库实例 db = DBRequestLink.result; // 其他操作 }; // 这个监听回调触发于数据库首次新建、open数据库传递新版本(只能比之前传递的版本高...) DBRequestLink.onupgradeneeded = function(event) {}; 创建数据库的主键和字段 DBOpenRequest.onupgradeneeded = function...、removeItem、setItem、clear ) 库大小为 475b Pouchdb API 简化为 put、get、remove,基于 promise 来检查回收错误 有较好的错误日志机制, 失败

    1.3K10

    浏览器数据库 IndexedDB 入门教程

    IndexedDB 操作不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。 (3)支持事务。...3.1 打开数据库 使用 IndexedDB 的第一步是打开数据库,使用indexedDB.open()方法。...如果省略,打开已有数据库,默认为当前版本;新建数据库,默认为1。 indexedDB.open()方法返回一个 IDBRequest 对象。...不同之处在于,后续的操作主要在upgradeneeded事件的监听函数里面完成,因为这时版本从无到有,所以会触发这个事件。 通常,新建数据库以后,第一件事是新建对象仓库(即新建表)。...新建必须指定表格名称和操作模式("只读"或"读写")。

    72510

    浏览器数据库 IndexedDB入门

    IndexedDB 操作不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。 (3)支持事务。 ...3.1 打开数据库 使用 IndexedDB 的第一步是打开数据库,使用indexedDB.open()方法。...如果省略,打开已有数据库,默认为当前版本;新建数据库,默认为1。 indexedDB.open()方法返回一个 IDBRequest 对象。...不同之处在于,后续的操作主要在upgradeneeded事件的监听函数里面完成,因为这时版本从无到有,所以会触发这个事件。 通常,新建数据库以后,第一件事是新建对象仓库(即新建表)。...新建必须指定表格名称和操作模式(”只读”或”读写”)。

    60540

    HTML5本地存储:从入门到精通

    异步操作: 所有数据库操作(打开、读写、查询)均采用异步模式,保证UI流畅性。 事务处理: 内置事务机制,确保数据一致性,即使在复杂的多步骤操作中也能保证数据完整性。...示例代码: // 打开或创建数据库 let db; const request = indexedDB.open('MyAppDB', 1); request.onupgradeneeded = function...⭐️ 数据库操作 打开或创建数据库 let db; const request = indexedDB.open(databaseName, version); request.onsuccess...进行类似清理逻辑... } // 每隔一天执行一次清理任务 setInterval(periodicCleanup, 24 * 60 * 60 * 1000); 用户触发清理 function logout...清理操作应在事务中进行,尤其是对于IndexedDB,确保数据一致性。 考虑用户隐私,在删除与用户身份关联的数据,遵循相关法律法规要求。

    9210

    IndexedDB 教程

    对于简单的数据,你应该继续使用 localstorage,但当你希望存储大量数据IndexedDB 会明显的更适合,IndexedDB 能提供你更为复杂的查询数据的方式。...当请求一个事务,必须决定是按照只读还是读写模式请求访问。 基于请求 对 indexedDB 数据库的每次操作,描述为通过一个请求打开数据库,访问一个 object store,再继续。...通过IDBFactory接口的open方法打开一个indexedDB的数据库实例 // 第一个参数: 数据库的名字,第二个参数:数据库的版本。...对打开数据库的事件进行处理 // 打开数据库成功后,自动调用onsuccess事件回调。...callback(); }; // 打开成功后,如果版本有变化自动执行以下事件 request.onupgradeneeded = function (e) {

    1.6K20

    基础| 实现网页瞬开,indexedDB的这几个基本操作你必须懂

    4.通过监听正确类型的 DOM 事件以等待操作完成。...若是已存在名为DB_NAME的数据库, 则上述代码会打开该数据库; 只触发success/error事件,不会触发upgradeneeded事件. db是对该数据库的引用....三、创建对象存储空间和索引 在关系型数据库(mysql)中,一个数据库中会有多张表,每张表有各自的主键、索引等; 在key-value型数据库(indexedDB)中, 一个数据库会有多个对象存储空间...在indexedDB2规范中,在对象存储空间对象上纳入了一个getAll()方法,可以获取所有对象: 在索引上使用游标 接着本文上述使用索引的例子,在索引title上使用openCursor()方法...总结 1.使用indexedDB.open(dbName, version)打开一个数据库连接 2.使用indexedDB.deleteDatabase(dbName)删除一个数据库 3.在数据库对象db

    2.9K10

    HTML5学习-day02【悟空教程】

    当请求一个事务,必须决定是按照只读还是读写模式请求访问。 3. 基于请求 对indexedDB数据库的每次操作,描述为通过一个请求打开数据库,访问一个object store,再继续。...indexedDB) { console.log("你的浏览器不支持IndexedDB"); } b) 创建请求打开indexedDB:一旦你的浏览器支持IndexedDB,我们就可以打开它。...你不能直接打开IndexedDB数据库。IndexedDB需要你创建一个请求来打开它。...但你增加数据库版本号,会触发onupgradeneeded事件,这时可能会出现成功、失败和阻止事件三种情况: request.onerror = function(e) { console.log(e.currentTarget.error.message...所以,你应该在onupgradeneeded函数里创建你的存储数据。如果没有版本号变化,而且页面之前被打开过,你会获得一个onsuccess事件。 2.

    1.7K30

    ES6(四)用Promise封装一下IndexedDB 配置文件内部成员建立对象库以及打开数据库初始化对象添加对象修改对象删除对象清空仓库里的对象删除对象仓库删除数据库按主键获取对象,

    indexedDB IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据,它可以被网页脚本创建和操作。...建立对象库以及打开数据库 // ======== 数据库操作 ================ /** * 打开 indexedDB 数据库。...indexedDb数据库:', dbRequest) } // 打开数据库的 promise const dbPromise = new Promise((resolve, reject...indexedDB 的逻辑是这样的,在open数据库的时候判断本地有没有数据库,如果没有数据库则触发 onupgradeneeded 事件,创建数据库,然后打开数据库。...如果有数据库的话,判断版本号,如果高于本地数据库,那么也会触发 onupgradeneeded 事件。所以open和 onupgradeneeded 就联系在了一起。

    2.1K20

    indexedDB_INDEX函数

    indexedDB介绍 原生介绍 indexedDB 是一个前端数据持久化解决方案(即前端缓存),由浏览器实现。 0. 兼容性 1.特点 基于文件存储。...事件中进行,而onupgradeneeded 事件只在数据库版本升级触发,所以我们这里版本号升级了。...库版本 一个数据库同一间只能存在一个最新的版本(该版本记录了当前使用的数据库和表结构) 只有在修改数据库结构和表结构,版本才需要升级 修改数据库结构和表结构或升级数据库版本对数据库内的数据一般没有影响...目前只有Firefox(43+)支持,这允许您为索引指定区域设置 示例: const request = window.indexedDB.open('demo', 3); request.onupgradeneeded...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1K50
    领券