事务与 CRUD
添加、读取、更新和删除记录。
事务与 CRUD 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 2 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
一切都是 transaction
在 IndexedDB 中,所有读取和写入都发生在 transaction 内。一个 transaction 会将多个操作组合起来,使它们要么全部成功,要么全部回滚,从而保持数据一致。
开始 transaction
使用 db.transaction(storeNames, mode) 创建 transaction。模式可以是 'readonly'(默认值),也可以是用于修改数据的 'readwrite'。
const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');获取对象仓库
通过 transaction 使用 tx.objectStore(name) 获取要操作的对象仓库。所有增删改查方法都位于这个对象仓库上。
const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');
// store.add / get / put / delete添加记录
store.add(value) 会插入一条新记录。如果已存在具有相同键的记录,操作就会失败,从而避免意外覆盖数据。
const store = tx.objectStore('notes');
const req = store.add({ id: 1, text: 'Buy milk' });
req.onsuccess = () => console.log('added with key', req.result);读取记录
store.get(key) 会根据键获取一条记录。结果会在 request 的 onsuccess 中以 request.result 的形式到达(如果未找到记录,则为 undefined)。
const req = store.get(1);
req.onsuccess = () => {
console.log('record:', req.result);
};使用 put 更新
store.put(value) 会插入或替换一条记录。与 add 不同,它会覆盖具有相同键的现有记录,因此非常适合更新数据。
store.put({ id: 1, text: 'Buy milk and eggs' });
// Replaces the existing record with id 1.删除记录
store.delete(key) 会删除具有指定键的记录。即使不存在这样的记录,操作也会成功。
const req = store.delete(1);
req.onsuccess = () => console.log('deleted');清空对象仓库
store.clear() 会一次性删除对象仓库中的所有记录。您可以使用它来重置缓存数据。
store.clear();
// All records in 'notes' are removed.transaction 完成
当所有操作都已提交时,transaction 本身会触发 oncomplete;如果发生故障,则会触发 onerror 或 onabort。请使用 oncomplete 确认写入已经持久化。
tx.oncomplete = () => console.log('all changes saved');
tx.onerror = () => console.log('transaction failed');自动提交行为
当没有待处理的 request 且控制权返回事件循环时,transaction 会自动提交。您不能让一个 transaction 跨越与之无关的异步工作中的 await,请将所有对象仓库操作放在一起完成。
// Queue operations synchronously within the same tx:
store.add({ id: 2, text: 'A' });
store.add({ id: 3, text: 'B' });
// Both commit together when tx completes.增删改查概述
四项核心操作可以清晰地对应起来:
- 创建:
add - 读取:
get - 更新:
put - 删除:
delete
所有操作都在事务中进行,从而保证一致性。
快速检查
测试您对事务和增删改查的理解。
回顾
您学习了事务和增删改查:
- 使用
db.transaction(store, mode)开始事务。 - 使用
tx.objectStore(name)获取对象存储。 add插入数据,get读取数据,put更新或插入数据,delete删除数据。- 每个请求的结果都会在其
onsuccess中返回。 tx.oncomplete确认更改已保存。
接下来学习索引和查询。
常见问题解答
「事务与 CRUD」课时是免费的吗?
是的 — 「事务与 CRUD」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 JavaScript Academy 课程的其余内容,请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「事务与 CRUD」这节课中我会学到什么?
添加、读取、更新和删除记录。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 2 节课,共 4 节。
「事务与 CRUD」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗?
能。每节 JavaScript Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。