1. 为什么海量本地数据一加载就卡从一次真实翻车说起如果你正在用 IndexedDB 存日志、聊天记录、传感器采样点这类数据量级一旦上万最容易踩的坑就是getAll()一把梭。我试过在一个离线笔记应用里直接getAll()拉两万条记录页面白屏三秒移动端直接闪退。问题不在 IndexedDB 本身而在于你把整个对象仓库一次性读进了内存。cursor.continue就是解决这个问题的核心 API。它属于 IndexedDB 游标cursor机制的一部分能让你像翻书一样一页一页读数据而不是把整本书复印一遍。适合谁适合做离线优先应用、本地日志查看器、聊天记录分页、时序数据浏览的前端开发者。它能做什么用游标递进定位代替OFFSET式跳页每次只读一页内存占用稳定首屏响应快。这篇内容聚焦一个具体场景用cursor.continue配合lastKey逐页读取海量本地数据避免一次性加载卡顿。同时给出 TaoToken 统一 Key/API 通道的配置骨架让你在调试分页逻辑时能快速验证模型输出、排查接入问题。下面从原理到代码到排障一步步落地。2. TaoToken 前置统一 Key 与 API 通道配置骨架在写分页代码之前先把调试通道搭好。TaoToken 提供统一的 API 入口方便你在开发 IndexedDB 分页逻辑时随时用模型对话验证数据结构、生成测试数据、排查报错。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。你需要先拿到 API Key。进入控制台创建密钥地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 密钥管理页在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。创建后复制那串sk-开头的 Key后面配置要用。配置骨架分两种常见形态。如果你用 VS Code 系插件或 Cursor 类编辑器通常写settings.json如果你用命令行工具或某些 Agent 框架可能写config.toml。下面两个片段可以直接复制把sk-你的密钥替换成真实 Key。{ taotoken.apiKey: sk-你的密钥, taotoken.baseUrl: https://taotoken.net/api, taotoken.model: claude-sonnet-4-20250514, taotoken.timeout: 60000 }[taotoken] api_key sk-你的密钥 base_url https://taotoken.net/api model claude-sonnet-4-20250514 timeout 60 [taotoken.retry] max_attempts 3 backoff_ms 800注意base_url只写到/api不要在后面拼/v1/chat/completions之类的路径具体端点由客户端库自己补全。写多了反而会 404。如果你要做长期编码或 Agent 类任务建议了解 Coding Plan地址是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。它适合需要持续调用、批量生成测试数据的场景。模型对话验证入口在 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。配置完成后先用一个最小请求确认通道通。下面用 curl 演示注意把 Key 换成你自己的。curl -s https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer sk-你的密钥 \ -d { model: claude-sonnet-4-20250514, messages: [{role: user, content: 回复 OK 两个字母即可}], max_tokens: 16 }预期返回里能看到choices[0].message.content包含OK。这一步通了说明 Key 和通道没问题可以专心写 IndexedDB 分页逻辑了。3. 可复制配置cursor.continue 分页查询完整实现现在进入核心部分。先理解cursor.continue(key)的本质它不是“跳过前 N 条”而是让当前游标移动到键值大于等于key的下一条记录按索引顺序。不传参就移动到下一条传入具体 key 就 seek 到该 key 或第一个大于它的记录。这意味着它天然适合“下一页”加载但不适合传统 SQL 的OFFSET式跳页。分页必须是连续、递进式的。下面以按时间倒序展示日志为例索引为timestamp降序读取。首次查询用openCursor(null, prev)打开倒序游标取前 20 条记下最后一条的timestamp作为lastKey。加载下一页时调用cursor.continue(lastKey)游标会定位到timestamp lastKey的下一条因为是降序实际是更早的一条。重复取 20 条更新lastKey继续调用。先建库和索引这段代码可以直接跑。const DB_NAME logDB; const DB_VERSION 1; const STORE_NAME logs; function openDB() { return new Promise((resolve, reject) { const req indexedDB.open(DB_NAME, DB_VERSION); req.onupgradeneeded (e) { const db e.target.result; if (!db.objectStoreNames.contains(STORE_NAME)) { const store db.createObjectStore(STORE_NAME, { keyPath: id, autoIncrement: true }); store.createIndex(timestamp, timestamp, { unique: false }); } }; req.onsuccess () resolve(req.result); req.onerror () reject(req.error); }); }写入一批测试数据方便验证分页效果。async function seedData(count 5000) { const db await openDB(); const tx db.transaction(STORE_NAME, readwrite); const store tx.objectStore(STORE_NAME); const base Date.now(); for (let i 0; i count; i) { store.add({ timestamp: base - i * 1000, level: i % 3 0 ? error : info, message: 日志条目 ${i} }); } return new Promise((resolve, reject) { tx.oncomplete () resolve(count); tx.onerror () reject(tx.error); }); }核心分页函数来了。注意lastKey的处理如果存在相同timestamp的多条记录需要额外用主键做二级排序或去重否则可能漏数据或重复。下面用timestamp加id组合判断。async function fetchPage(lastKey null, pageSize 20) { const db await openDB(); const tx db.transaction(STORE_NAME, readonly); const index tx.objectStore(STORE_NAME).index(timestamp); const range null; const direction prev; return new Promise((resolve, reject) { const results []; let cursorAdvanced false; const req index.openCursor(range, direction); req.onsuccess (e) { const cursor e.target.result; if (!cursor) { resolve({ items: results, lastKey: results.length ? results[results.length - 1].timestamp : null, hasMore: false }); return; } if (!cursorAdvanced lastKey ! null) { cursorAdvanced true; cursor.continue(lastKey); return; } results.push(cursor.value); if (results.length pageSize) { cursor.continue(); } else { const nextKey results[results.length - 1].timestamp; resolve({ items: results, lastKey: nextKey, hasMore: true }); } }; req.onerror () reject(req.error); }); }调用方式很直观。第一页传null后续页传上一页返回的lastKey。async function loadAllPages() { let lastKey null; let page 0; while (true) { const { items, lastKey: nextKey, hasMore } await fetchPage(lastKey, 20); page; console.log(第 ${page} 页${items.length} 条lastKey${nextKey}); if (!hasMore || items.length 0) break; lastKey nextKey; } }提示cursor.continue(lastKey)在降序游标里会定位到timestamp lastKey的记录。如果你用升序逻辑要反过来定位到timestamp lastKey。方向搞反是新手最常见的错误。4. 验证请求与成功结果分页是否真的生效写完代码要验证。最直接的方式是看控制台输出和内存占用。先跑seedData(5000)写入五千条再跑loadAllPages()。预期看到类似下面的输出每页 20 条lastKey逐页递减。第 1 页20 条lastKey1735689600000 第 2 页20 条lastKey1735689580000 第 3 页20 条lastKey1735689560000 ... 第 250 页20 条lastKey1735687100000如果每页条数正确、lastKey单调递减、总页数约等于 5000/20250说明分页逻辑通了。再打开 DevTools 的 Memory 面板对比getAll()和游标分页的内存曲线。getAll()会看到内存尖峰游标分页则平稳很多。还可以用 TaoToken 的模型对话入口辅助验证。把一段分页返回的 JSON 贴进去让模型帮你检查字段是否完整、lastKey是否合理。模型对话地址是 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。比如你问“这段分页数据里 lastKey 是否单调递减”模型能快速给出判断省去手写校验脚本的时间。另一个验证点是边界情况。把pageSize设成 1看是否能逐条遍历完把lastKey设成一个不存在的值看游标是否正确 seek 到第一个大于它的记录。这些边界测试能暴露大部分逻辑漏洞。5. 本篇常见错排查cursor.continue 分页踩坑清单第一个坑是cursor.continue()不传参和传参混用导致死循环。如果你在onsuccess里既判断lastKey又无条件continue()游标可能反复定位到同一条记录。正确做法是用一个标志位cursorAdvanced确保 seek 只执行一次就像上面代码那样。第二个坑是相同timestamp导致漏数据或重复。假设有 5 条记录timestamp都是1735689600000你取到第 3 条时记下lastKey下一页continue(lastKey)会定位到timestamp lastKey的下一条可能跳过同时间戳的剩余记录。解决办法是用复合索引比如[timestamp, id]或者用主键做二级排序。第三个坑是事务提前关闭。IndexedDB 的事务在事件循环空闲时会自动提交。如果你在onsuccess里做了await异步操作事务可能已经关了后续cursor.continue()会报TransactionInactiveError。所有游标操作必须在同一个事务的同步回调里完成。第四个坑是方向搞反。升序索引用next降序用prev。如果你用prev却传了一个比当前记录大的lastKey游标会直接走到末尾返回空结果。排查时先打印cursor.key和cursor.value.timestamp确认方向一致。第五个坑是lastKey类型不匹配。IndexedDB 的键比较是类型敏感的数字和字符串不会互相转换。如果你存的是Date.now()数字却传了字符串1735689600000seek 会失败。统一用数字类型。如果排查中遇到 API 报错比如 401 或 429先去 API Keys 页面确认密钥状态地址是 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。接入细节看文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。长期做编码类任务的话Coding Plan 在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。6. 语义一致收尾把分页逻辑接进你的项目最后说一个实用技巧。实际项目里分页通常和 UI 滚动绑定。你可以把fetchPage的lastKey存在组件状态里滚动到底部时触发下一页。注意加一个loading标志防止重复请求。另外如果数据会实时新增倒序分页的lastKey可能因为新数据插入而失效这时候要么用快照要么接受轻微不一致。TaoToken 的模型对话入口在 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 调试分页数据结构时很好用。API Keys 在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 有完整入口。把上面的fetchPage函数复制进你的项目先跑seedData(5000)验证再换成真实数据源。记住核心cursor.continue(lastKey)是递进定位不是跳过前 N 条。方向、类型、事务三件事对齐分页就不会卡。