IndexedDB 是一个浏览器中用于存储结构化数据的 API。它类似于关系数据库，但是它使用对象而不是表来表示数据。在大多数情况下，IndexedDB 可以存储大量数据，但是在存储数据时，它有一个最大项大小限制。
什么是最大项大小？
IndexedDB 的最大项大小指的是可以存储在数据库中的单个项的最大大小。这个限制对于所有主流浏览器都存在，并且要小于浏览器或操作系统的其他限制。
在 WebKit 和 Blink 内核的浏览器中（如 Chrome、Safari），最大项大小默认为 2GB。在 Firefox 中默认为 50MB。如果尝试存储超过最大项大小限制的数据，则会导致错误。
如何确定最大项大小？
可以使用以下代码确定当前浏览器中的最大项大小：
const db = window.indexedDB.open('test', 1);
db.onupgradeneeded = function(event) {
const db = event.target.result;
const maxItemSize = db.objectStore('test').maxKeyPath;
console.log('Maximum item size:', maxItemSize);
};此代码将打开名为 "test" 的数据库并检查其中的 object store，获取该对象存储的键路径的最大值。如果浏览器支持 IDBObjectStore.keyPath 属性，则该属性将返回最大项大小；否则将返回 null。
如何避免超出最大项大小限制？
为了避免超出最大项大小限制，请注意存储的数据大小，并将大型数据拆分为可管理的块。可以使用 Blob 或 ArrayBuffer 等类型将数据分割成较小的块，然后在 IndexedDB 中存储这些块。
以下是一个示例代码片段，演示如何将数据拆分并存储在 IndexedDB 中：
-- -------------------- ---- -------
----- -- - -------------------------------- ---
------------------ - --------------- -
----- -- - --------------------
----- ----- - --------------------------------
--
------------ - --------------- -
----- -- - --------------------
-- -------
----- ---------- - ---- - ----- -- ---
----- ---- - --- -------------- - ------------
----- ------ - ---
--- ---- - - -- - - ---------------- - -- ----------- -
------------------------- - - -------------
-
-- ---
----- ----------- - --------------------------- -------------
----- ----- - -----------------------------------
--- ------ - --
--- ------ ----- -- ------- -
---------------- --------
------ -- -----------------
-
--在上面的示例中，我们首先将要存储的数据拆分为大小为 1MB 的块。然后，我们创建数据库和对象存储，并将这些块添加到对象存储中。每个块都具有其在原始数据中的偏移量，以便在检索时可以重新组合它们。
结论
IndexedDB 是一个强大的浏览器 API，可以用于存储大量结构化数据。但是，在存储数据时要注意最大项大小限制，并根据需要拆分数据为可管理的块来避免超出这种限制。使用上述技术，您可以编写出高效而可靠的 IndexedDB 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28648