JavaScript Academy · 课时

打开数据库

Q: 「打开数据库」这节课中我会学到什么？

创建数据库和对象存储。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

创建数据库和对象存储。

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

IndexedDB 是什么

IndexedDB 是浏览器内置的大容量、支持 transaction 的数据库。与 localStorage（容量小、仅支持字符串且同步运行）不同，它可以存储结构化对象、支持索引，并且以异步方式工作。

打开数据库

您可以使用 indexedDB.open(name, version) 打开（或创建）数据库。它会返回一个 request 对象，其事件会报告成功或失败。

const request = indexedDB.open('notes-db', 1);

请求事件

打开请求会触发以下需要处理的事件：

onsuccess — 数据库已准备就绪
onerror — 打开失败
onupgradeneeded — 必须创建或升级数据结构

request.onsuccess = (e) => {
  const db = e.target.result;
  console.log('database opened');
};
request.onerror = (e) => {
  console.log('open failed:', e.target.error);
};

onupgradeneeded

onupgradeneeded 会在数据库首次创建或版本号增加时运行。这是唯一可以更改数据结构（创建或删除对象仓库和索引）的地方。

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  // create object stores here
};

对象仓库

对象仓库类似于表，是记录的容器。请在 onupgradeneeded 内使用 db.createObjectStore(name, options) 创建对象仓库。

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  db.createObjectStore('notes', { keyPath: 'id' });
};

keyPath

keyPath 告诉 IndexedDB 每个对象的哪个属性是其主键。存储的对象必须包含该属性，并且键必须唯一。

db.createObjectStore('users', { keyPath: 'email' });
// Each stored user object must have a unique 'email'.

自动递增键

如果对象没有自然键，可以使用 autoIncrement: true 让 IndexedDB 自动生成键。每条新记录都会获得下一个整数。

db.createObjectStore('logs', {
  keyPath: 'id',
  autoIncrement: true
});
// id is assigned automatically on add().

检查现有对象仓库

由于 onupgradeneeded 会在每次版本升级时运行，请使用 db.objectStoreNames.contains 保护创建操作，以避免重复运行时出错。

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (!db.objectStoreNames.contains('notes')) {
    db.createObjectStore('notes', { keyPath: 'id' });
  }
};

保留 db 引用

请从 onsuccess 中保存数据库对象，以便后续操作使用。所有读取和写入都通过这个 db 实例进行。

let db;
request.onsuccess = (e) => {
  db = e.target.result; // reuse for transactions
};

处理被阻塞的打开操作

如果另一个标签页仍然打开着旧版本，升级操作可能会被 blocked。请监听 onblocked，并请求用户关闭其他标签页。

request.onblocked = () => {
  console.log('Close other tabs to upgrade the database.');
};

打开流程

打开 IndexedDB 的流程是：使用名称和版本调用 open，在 onupgradeneeded 中创建数据结构，然后在 onsuccess 中获取 db。之后，您就可以通过 transaction 读取和写入数据。

快速检查

请测试您对打开数据库的理解。

回顾

您已经学会了如何打开 IndexedDB 数据库：

indexedDB.open(name, version) 会返回一个 request。
只能在 onupgradeneeded 中创建对象仓库。
keyPath 设置主键；autoIncrement 生成键。
从 onsuccess 中保存 db，以便后续使用。
处理 onerror 和 onblocked。

接下来将学习 transaction 和增删改查操作。

常见问题解答

「打开数据库」课时是免费的吗？

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

「打开数据库」这节课中我会学到什么？

创建数据库和对象存储。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「打开数据库」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy