indexeddb是浏览器内置支持事务的nosql数据库,适合缓存文章详情等结构化数据:先用indexeddb.open()创建数据库并监听upgradeneeded建对象仓库(如"articles")和索引(如"bypubtime"),再通过readwrite事务调用put()存储json数据,用get()/getall()读取,配合网络请求实现“先查缓存、未命中再拉取并回填”的策略,升级版本时在upgradeneeded中迁移旧数据。

IndexedDB 是浏览器内置的、支持事务的 NoSQL 数据库,适合存储结构化数据(比如文章详情),尤其适合离线场景。要缓存网页抓取的文章详情,核心是:创建数据库 → 定义对象仓库 → 存储/读取 JSON 格式的详情数据 → 配合网络请求做缓存策略(如先查缓存,再更新)。
创建并打开 IndexedDB 数据库
用 indexedDB.open() 创建或打开数据库,指定版本号。首次打开时触发 upgradeneeded 事件来建表(即对象仓库):
- 数据库名建议唯一,如
"articleCache" - 对象仓库(object store)命名建议语义化,如
"articles",主键设为文章 ID(如id字段) - 若需按发布时间查询,可添加索引:
store.createIndex("byPubTime", "pubTime", { unique: false })
存储文章详情数据
文章详情通常是 JSON 对象(含 title、content、author、pubTime 等字段)。写入前确保数据库已就绪(onsuccess 或 Promise 封装后):
- 使用
transaction("articles", "readwrite")获取读写事务 - 调用
objectStore.put(articleData, articleData.id)写入;若id已存在则覆盖 - 可封装成函数,例如
saveArticle({ id: "123", title: "...", content: "..." })
读取缓存中的文章详情
优先从 IndexedDB 读取,命中则直接渲染;未命中再发起网络请求,并在获取后自动缓存:
- 用
get(id)方法查单条:store.get("123").onsuccess = e => console.log(e.target.result) - 支持批量查多个 ID:用
getAll(IDsArray)或游标(cursor)遍历 - 查不到时返回
undefined,此时可调接口拉取,成功后再调saveArticle()回填
处理版本升级与数据迁移
后续加字段(如新增 readStatus)、改主键或重构结构,必须升级版本号并监听 upgradeneeded:
- 旧版数据库会自动关闭,新版事务中可读旧数据、写新结构
- 例如:从 v1 升到 v2,可在
event.oldVersion === 1时遍历旧数据,补全新字段再 put 到新 store - 避免直接删库重建,否则用户已有缓存丢失
不复杂但容易忽略:记得所有 IndexedDB 操作都是异步的,推荐用 Promise 封装(如用 idb 库或手写 promisify),避免回调地狱;同时注意错误捕获(onerror / transaction.onabort),特别是存储超限时(如 Chrome 默认配额约 50% 磁盘空间,但单 origin 通常几 GB)。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











