讲师中心 微信公众号
AI工具推荐 视频效率加速

IndexedDB 版本更新机制:onupgradeneeded 钩子的正确使用方式

浅萱吖_9500

浅萱吖_9500

发布时间:2026-06-14 07:22:26

|

277人浏览过

|

来源于php中文网

原创

onupgradeneeded是IndexedDB唯一可修改数据库结构的时机,仅在首次创建数据库或open时传入更高整数版本号时触发;必须递增版本、检查对象仓库与索引是否存在、结构操作仅限于此回调;旧标签页会阻塞升级,需监听onversionchange并提示用户刷新。

indexeddb 版本更新机制:onupgradeneeded 钩子的正确使用方式

onupgradeneeded 不是可选回调,而是 IndexedDB 唯一允许修改数据库结构的时机。只要没在它里面建好对象仓库(object store)和索引,后续所有读写操作都会失败。

什么时候会触发 onupgradeneeded

只有两种情况会真正执行这个回调:

  • 数据库首次创建(从无到有),哪怕版本号是 1,oldVersion 为 0,也会触发
  • 调用 indexedDB.open("db", newVersion) 且 newVersion 高于当前已存在的版本号

如果版本号不变、或没传版本号(默认为 1)、或传了更低的版本号,它都不会触发——此时你写的 createObjectStore 就像没写一样。

必须递增版本号,不能复用旧值

每次新增对象仓库、删除索引、改 keyPath 或加 autoIncrement,都得升版本。比如从 1 → 2,再从 2 → 3。浏览器靠这个数字判断是否需要走升级流程。

  • 版本号必须是整数,不能是字符串或小数
  • 写成 indexedDB.open("mydb", 1) 却想建新索引?不行——除非之前根本没建过库,否则不会进 onupgradeneeded
  • 跨版本升级(比如跳过 v2 直接升到 v3)时,要用 oldVersion < 2 而不是 oldVersion === 1 来判断逻辑分支

onupgradeneeded 里要做的三件事

这个回调里做的事,决定了你后续能不能正常使用数据库:

  • 先检查再创建:用 db.objectStoreNames.contains("users") 判断 store 是否已存在,避免重复建导致 ConstraintError
  • 索引也得检查:创建前用 store.indexNames.contains("email"),删索引前也要先 if (store.indexNames.contains("old_idx")) store.deleteIndex("old_idx")
  • 结构变更只能在这里做:createObjectStore、deleteObjectStore、createIndex、deleteIndex 全部只能放这里——写在 onsuccess 或其他地方会直接报 InvalidStateError

旧标签页会卡住升级,必须主动处理

就算你把版本号改成 3,只要另一个标签页还连着 v2 的数据库,新页面的 onupgradeneeded 就不会触发,而且不报错、不提示,静默失败。

  • 在 onsuccess 里立刻给 db 绑定 onversionchange,检测到冲突就 db.close()
  • 配合 UI 提示用户刷新页面,别让旧连接一直占着资源
  • 大数据迁移别塞在 onupgradeneeded 里:游标遍历几万条记录会卡死主线程,应拆到独立事务中分批处理

热门AI工具

更多
讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2383

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5143

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6210

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5758

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

823

2024.05.22

PixTV官网入口地址合集
PixTV官网入口地址合集

本专题汇总了 PixTV AI 一站式视频创作平台的官方入口与使用教程。无需下载软件,浏览器直接访问即可使用。平台将剧本、图像、视频、声音与剪辑整合在“无限画布”中,接入 GPT Image 2.5、Seedance 2.5 等头部模型。本专题整理了从新建画布、角色锚定、分镜拆分到视频生成与导出的完整操作指南,助你快速上手 AI 短剧与漫剧创作。

0

2026.10.10

Kratos框架HTTP与gRPC服务开发教程
Kratos框架HTTP与gRPC服务开发教程

本专题围绕Kratos框架双协议服务开发,涵盖HTTP路由与处理器编写、参数获取、gRPC服务实现与客户端调用、metadata上下文传递、encoding编解码注册、统一响应封装、超时控制与流式响应实现方法。

0

2026.10.10

Kratos框架Protobuf接口定义与代码生成合集
Kratos框架Protobuf接口定义与代码生成合集

本专题讲解Kratos框架接口定义体系,涵盖proto编写规范、proto add/client/server生成命令、http注解路由、validate校验、OpenAPI文档生成、跨服务proto复用与兼容性设计。

0

2026.10.10

C++虚函数怎么定义和调用
C++虚函数怎么定义和调用

C++虚函数是实现运行时多态的重要机制。本专题从virtual关键字的基本用法入手,介绍基类与派生类之间的函数重写、基类指针调用派生类方法,以及动态绑定的执行过程,帮助初学者掌握虚函数的核心语法。

20

2026.10.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn