如何通过HTML的IndexedDB的getAll方法批量读取仓库中的所有记录

雨丽吖_3967

雨丽吖_3967

2026-05-11

288人浏览

原创

getall()返回空数组是因为未传参时默认查询空范围而非全表扫描,需显式传idbkeyrange;它不兼容ie和旧safari,大数量可能截断或卡顿,且promise resolve后事务可能关闭,操作须在链内完成。

如何通过html的indexeddb的getall方法批量读取仓库中的所有记录

getAll() 为什么返回空数组却没报错

调用 getAll() 后得到空数组 [],不是因为语法错,而是它默认只查当前游标范围内的记录——而你没指定任何 keyRange,默认范围是空的。IndexedDB 的 getAll()(包括 getAllKeys())在未传参时,**不等价于“全表扫描”**,它实际行为是“查一个空范围”,结果自然为空。

正确做法是显式传入一个覆盖全部键的 IDBKeyRange:

const range = IDBKeyRange.lowerBound(0); // 假设主键是数字且 ≥ 0
// 或更稳妥的无界范围:
const range = IDBKeyRange.bound(-Infinity, Infinity, true, true);

注意:如果 store 主键是字符串(比如 UUID),lowerBound(0) 会漏掉所有字典序小于 "0" 的键(如 "abc"),此时必须用 IDBKeyRange.bound('', '', true, true) 不行——空字符串不是下界;应改用 IDBKeyRange.lowerBound('')(字符串主键通常可安全用空字符串作下界)。

getAll() 在不同浏览器中的兼容性陷阱

getAll() 是 IndexedDB v2.0 新增方法,IE 完全不支持,Safari 直到 12.1 才完整支持(早期版本可能抛 TypeError: function not supported)。如果你需要兼容 Safari getAll()。

替代方案是手动 openCursor 遍历:

const records = [];
const request = objectStore.openCursor();
request.onsuccess = function(e) {
  const cursor = e.target.result;
  if (cursor) {
    records.push(cursor.value);
    cursor.continue();
  }
};

这个写法兼容所有支持 IndexedDB 的浏览器,但要注意:大量数据时,递归 cursor.continue() 可能触发调用栈溢出(尤其在低内存设备),建议改用循环 + request.onsuccess 事件重绑,或分批读取(如每次取 100 条)。

Wechat HTML Publisher
Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

getAll() 的性能瓶颈在哪

getAll() 一次性加载全部记录到内存,对大仓库(>10MB 或 >5000 条)极易引发卡顿甚至 OOM。它不支持流式读取,也没有 limit/offset 参数。

实际使用中应考虑:

  • 是否真的需要“全部”?优先用 get() 或带 IDBKeyRange 的 getAll() 按需拉取
  • 若必须全量导出,请配合 indexedDB.cmp() 分段游标(例如按时间戳分页),避免单次请求过大
  • Chrome 90+ 对 getAll() 加了内部限制:超过约 65536 条时可能静默截断(不报错但少数据),务必校验返回长度与 count() 结果是否一致

如何安全地拿到 getAll() 的全部结果

getAll() 返回的是 Promise(仅当调用方在事务活跃期内),但它**不自动保持事务打开**。常见错误是:Promise resolve 后再访问 result,却发现事务已自动关闭,导致后续操作失败。

正确姿势是把所有依赖结果的操作放在 Promise 链内:

transaction.objectStore('users').getAll().then(records => {
  console.log('共', records.length, '条');
  // ✅ 此时事务仍活跃,可继续写入、删除等
  return transaction.objectStore('log').add({ action: 'export', count: records.length });
}).then(() => {
  // ✅ 事务在此处才真正完成
});

另一个坑:如果在 getAll() 前已调用 transaction.oncomplete,Promise resolve 时事务可能已被关闭,导致后续 put() 报 TransactionInactiveError。务必确保事务生命周期覆盖整个异步链。

复杂点在于:没有“批量读完再统一提交”的原子语义。每条记录都是独立对象,深拷贝、过滤、映射都得自己做,别指望 IndexedDB 帮你做数据转换。

前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

html

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
html版权符号
html版权符号

html版权符号是“©”,可以在html源文件中直接输入或者从word中复制粘贴过来,php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

5915

7

html在线编辑器
html在线编辑器

html在线编辑器是用于在线编辑的工具,编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方,是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容,供大家免费下载使用。

2023.06.21

3332

4

html网页制作
html网页制作

html网页制作是指使用超文本标记语言来设计和创建网页的过程,html是一种标记语言,它使用标记来描述文档结构和语义,并定义了网页中的各种元素和内容的呈现方式。本专题为大家提供html网页制作的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.31

3010

5

html空格
html空格

html空格是一种用于在网页中添加间隔和对齐文本的特殊字符,被用于在网页中插入额外的空间,以改变元素之间的排列和对齐方式。本专题为大家提供html空格的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.01

3039

5

html是什么
html是什么

HTML是一种标准标记语言,用于创建和呈现网页的结构和内容,是互联网发展的基石,为网页开发提供了丰富的功能和灵活性。本专题为大家提供html相关的各种文章、以及下载和课程。

2023.08.11

4819

6

html字体大小怎么设置
html字体大小怎么设置

在网页设计中,字体大小的选择是至关重要的。合理的字体大小不仅可以提升网页的可读性,还能够影响用户对网页整体布局的感知。php中文网将介绍一些常用的方法和技巧,帮助您在HTML中设置合适的字体大小。

2023.08.11

2981

3

html转txt
html转txt

html转txt的方法有使用文本编辑器、使用在线转换工具和使用Python编程。本专题为大家提供html转txt相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

2789

3

html文本框代码怎么写
html文本框代码怎么写

html文本框代码:1、单行文本框【<input type="text" style="height:..;width:..;" />】;2、多行文本框【textarea style=";height:;"></textare】。

2023.09.01

2468

6

HTML嵌入CSS样式的方法
HTML嵌入CSS样式的方法

HTML嵌入CSS样式的方法有内联样式、内部样式表和外部样式表。本专题为大家提供CSS样式相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.20

2528

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
GDB 17.2 官方文档集合
GDB 17.2 官方文档集合

共0课时 | 0人学习

Bootstrap 入门安装配置
Bootstrap 入门安装配置

共0课时 | 0人学习

38+ PhpStorm 提示和技巧
38+ PhpStorm 提示和技巧

共1课时 | 222人学习