https://www.zhuzhugst.com/ 2026-04-27T16:48:05+00:00 https://www.zhuzhugst.com/ https://www.zhuzhugst.com/lib/exe/fetch.php?media=logo.png text/html 2026-04-27T11:55:25+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part15-appendix&rev=1777290925&do=diff 第十五部分：附录 15.1 API 参考 15.1.1 IDBFactory // 打开数据库 IDBFactory.open(name, version) // 删除数据库 IDBFactory.deleteDatabase(name) // 比较两个键 IDBFactory.cmp(first, second) 15.1.2 IDBDatabase // 属性 db.name // 数据库名称 db.version // 数据库版本 db.objectStoreNames // 对象存储列表 // 方法 db.createObjectStore(name, options) db.deleteObjectStore(name) db.transaction(storeNames, mode) db.close() text/html 2026-04-27T11:55:04+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part14-troubleshoot&rev=1777290904&do=diff 第十四部分：故障排除与调试 14.1 常见问题 14.1.1 数据库打开失败 问题：indexedDB.open() 报错 原因： * 浏览器隐私模式限制了 IndexedDB * 存储配额已满 * 浏览器不支持 解决方案： async function safeOpenDB(dbName, version) { try { // 检测支持性 if (!window.indexedDB) { throw new Error('浏览器不支持 IndexedDB'); } // 检测配额 if (navigator.storage && navigator.storage.estimate) { const estimate = await navigator.storage.estimate(); if (estimate.usage >= estimate.quota) { throw new Error('存储空间已满'); } } … text/html 2026-04-27T11:54:45+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part13-compare&rev=1777290885&do=diff 第十三部分：存储技术对比 13.1 浏览器存储技术概览 现代浏览器提供了多种客户端存储方案，各有适用场景。 13.2 IndexedDB vs LocalStorage 对比项 IndexedDB LocalStorage 存储容量 250MB+ (浏览器决定) text/html 2026-04-27T11:54:25+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part12-cases&rev=1777290865&do=diff 第十二部分：实战案例 12.1 离线笔记应用 12.1.1 需求分析 功能需求： * 创建、编辑、删除笔记 * 支持富文本内容 * 按标签分类 * 全文搜索 * 离线可用，联网后同步 12.1.2 数据库设计 text/html 2026-04-27T11:54:06+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part11-patterns&rev=1777290846&do=diff 第十一部分：设计模式与架构 11.1 封装层设计 11.1.1 Promise 封装 原生 IndexedDB API 基于事件，代码冗长。Promise 封装让代码更简洁： class IndexedDBWrapper { constructor(dbName, version) { this.dbName = dbName; this.version = version; this.db = null; } open(upgradeCallback) { return new Promise((resolve, reject) => { const request = indexedDB.open(this.dbName, this.version); request.onupgradeneeded = (event) => { if (upgradeCallback) { upgradeCallback(event.target.result, e… text/html 2026-04-27T11:53:48+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part10-performance&rev=1777290828&do=diff 第十部分：性能优化 10.1 性能概述 IndexedDB 的性能受多种因素影响，包括数据量、索引设计、事务使用方式等。本章介绍如何识别性能瓶颈并进行优化。 10.2 批量操作优化 10.2.1 单事务批量写入 text/html 2026-04-27T11:53:27+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part09-advanced&rev=1777290807&do=diff 第九部分：高级特性 9.1 二进制数据存储 9.1.1 Blob 和 File IndexedDB 可以直接存储 Blob 和 File 对象： // 存储图片 async function storeImage(file) { const transaction = db.transaction(['images'], 'readwrite'); const store = transaction.objectStore('images'); const imageRecord = { id: generateId(), name: file.name, type: file.type, size: file.size, data: file, // 直接存储 File 对象 uploadedAt: new Date().toISOString() }; return new Promise((resolve, reject) => { const request = store.add… text/html 2026-04-27T11:52:51+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part08-upgrade&rev=1777290771&do=diff 第八部分：数据库版本升级 8.1 版本升级概述 IndexedDB 通过版本号管理数据库结构。当需要添加对象存储、创建索引或修改结构时，必须增加版本号触发升级流程。 8.1.1 为什么需要版本升级 text/html 2026-04-27T11:52:28+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part07-cursor&rev=1777290748&do=diff 第七部分：游标(Cursor)与范围查询 7.1 游标概述 游标(Cursor)是 IndexedDB 中遍历数据的机制。与 getAll() 一次性加载所有数据不同，游标可以逐条处理记录，适合大数据集的遍历和复杂查询场景。 text/html 2026-04-27T11:52:10+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part06-transaction&rev=1777290730&do=diff 第六部分：事务(Transaction)详解 6.1 事务概述 事务是 IndexedDB 中所有数据操作的基本执行单元。理解事务的工作机制，是正确使用 IndexedDB 的关键。事务保证了数据操作的原子性、一致性、隔离性和持久性（ACID）。 text/html 2026-04-27T11:51:48+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part05-crud&rev=1777290708&do=diff 第五部分：CRUD 操作详解 5.1 CRUD 概述 CRUD 是数据库操作的四大基本功能：创建(Create)、读取(Read)、更新(Update)、删除(Delete)。在 IndexedDB 中，这些操作对应 add、get/put、delete 等方法。本章将深入讲解每种操作的使用方式、注意事项和最佳实践。 text/html 2026-04-27T11:51:29+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part04-index&rev=1777290689&do=diff 第四部分：索引(Index)详解 4.1 索引概述 索引是 IndexedDB 中实现高效查询的关键机制。没有索引，你只能通过主键查找数据；有了索引，你可以根据任意属性快速定位记录。 4.1.1 为什么需要索引 text/html 2026-04-27T11:51:07+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part03-objectstore&rev=1777290667&do=diff 第三部分：对象存储空间(Object Store)详解 3.1 对象存储空间概述 对象存储空间(Object Store)是 IndexedDB 中最核心的概念，它是实际存储数据的地方。理解对象存储空间的设计和使用方式，是掌握 IndexedDB 的关键。 text/html 2026-04-27T11:50:43+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part02-setup&rev=1777290643&do=diff 第二部分：环境搭建与第一个数据库 2.1 开发环境准备 2.1.1 浏览器支持情况 IndexedDB 在所有现代浏览器中都得到了良好支持： 浏览器 最低版本 备注 Chrome 23+ 完全支持 Firefox 16+ 完全支持 text/html 2026-04-27T11:50:20+00:00 张叶安 (midas@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=indexeddb:part01-introduction&rev=1777290620&do=diff 第一部分：基础概念 1.1 什么是 IndexedDB IndexedDB（索引数据库）是浏览器提供的一种客户端结构化数据存储解决方案。它是 Web Storage（LocalStorage 和 SessionStorage）的升级版，专为存储大量结构化数据而设计。