JavaScript Academy · 课时

版本管理与升级

Q: 「版本管理与升级」这节课中我会学到什么？

通过版本变更迁移架构。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

通过版本变更迁移架构。

版本管理与升级 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

为什么需要版本管理

应用会不断演进：您可能会添加对象存储、添加索引，或改变数据的结构。IndexedDB 使用版本号，在每位用户的浏览器中安全地管理这些架构变更。

版本号

open 的第二个参数是版本号，必须是正整数。提高版本号会告诉浏览器架构已发生变化，并触发升级。

// Bumping from 1 to 2 triggers onupgradeneeded:
const request = indexedDB.open('app-db', 2);

升级只能递增

版本号只能增加。使用低于已存储版本号的版本打开数据库会失败并产生错误。请勿降低版本号。

// If the stored DB is version 3:
const req = indexedDB.open('app-db', 2);
req.onerror = () => console.log('cannot open older version');

oldVersion 与 newVersion

在 onupgradeneeded 中，事件会提供 oldVersion 和 newVersion。使用它们可以只应用尚未执行的迁移。

request.onupgradeneeded = (e) => {
  console.log('upgrading from', e.oldVersion, 'to', e.newVersion);
};

增量迁移

一种可靠的模式是使用 oldVersion 实现贯穿式迁移：每个代码块都建立在前一个代码块的基础上，因此无论用户使用哪个旧版本，都能到达最新架构。

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (e.oldVersion < 1) {
    db.createObjectStore('notes', { keyPath: 'id' });
  }
  if (e.oldVersion < 2) {
    db.createObjectStore('tags', { keyPath: 'name' });
  }
};

稍后添加索引

要在升级期间为现有对象存储添加索引，请从升级事务中获取对象存储，然后对其调用 createIndex。

request.onupgradeneeded = (e) => {
  if (e.oldVersion < 3) {
    const store = e.target.transaction.objectStore('notes');
    store.createIndex('byDate', 'createdAt');
  }
};

版本变更事务

在 onupgradeneeded 期间，事件的 transaction 是一种特殊的 versionchange 事务。只有在此上下文中，才能同时进行架构编辑和数据迁移。

request.onupgradeneeded = (e) => {
  const tx = e.target.transaction; // versionchange tx
  const store = tx.objectStore('notes');
  // migrate existing records here if needed
};

迁移现有数据

如果架构变更要求重新组织记录，请在升级过程中使用游标遍历对象存储，并将转换后的值使用 put 写回。

const store = e.target.transaction.objectStore('notes');
store.openCursor().onsuccess = (ev) => {
  const cursor = ev.target.result;
  if (cursor) {
    const note = cursor.value;
    note.archived = false; // new field
    cursor.update(note);
    cursor.continue();
  }
};

versionchange 事件

当一个标签页执行升级时，其他持有旧版本的标签页会在其 db 上收到 versionchange 事件。它们应当关闭数据库，以免阻塞升级。

db.onversionchange = () => {
  db.close(); // let the other tab upgrade
  console.log('database is outdated, please reload');
};

删除对象存储

您可以在升级期间使用 db.deleteObjectStore(name) 移除不再需要的对象存储。这会永久删除该对象存储及其中的数据。

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (e.oldVersion < 4 && db.objectStoreNames.contains('temp')) {
    db.deleteObjectStore('temp');
  }
};

升级最佳实践

让迁移按照 oldVersion 排序并具备幂等性，在 versionchange 时关闭旧连接，并测试从每个旧版本进行升级的情况。这样可以保持回访用户的数据完整。

快速检查

测试您对版本管理和升级的理解。

回顾

您学习了版本管理和升级：

提高版本号以触发 onupgradeneeded。
使用 oldVersion 实现增量且幂等的迁移。
升级过程中的 versionchange 事务可以编辑架构和数据。
使用游标和 cursor.update 迁移记录。
在 versionchange 事件中关闭旧标签页。

您已经完成 IndexedDB 的学习。接下来学习服务工作线程。

常见问题解答

「版本管理与升级」课时是免费的吗？

是的 — 「版本管理与升级」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「版本管理与升级」这节课中我会学到什么？

通过版本变更迁移架构。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「版本管理与升级」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy