如何使用indexedDB将无限*数据存储在浏览器中

>本文探讨了IndexedDB，这是一种可用于客户端数据存储的强大浏览器API，超过了替代方法的能力。 客户端数据存储选项已大大扩展，为基于服务器的数据库更新提供了替代方案。

indexedDB的关键优点：>

高存储容量：
• indexedDB比其他客户端选项提供了更多的存储空间，该选项可能至少提供1GB，并且每个域可用磁盘空间的60％。 >异步操作：
它的异步性质允许背景处理而无需阻止其他脚本，非常适合大型数据集。>
• 综合性的CRUD操作：支持创建，阅读，更新和删除记录（CRUD），以及数据库版本和架构管理。
• 数据完整性：通过交易维持数据完整性，以确保所有操作成功或失败。> 基于密钥的数据访问：
• 数据位于对象存储中，并由按键确定的记录。>
>浏览器DevTools集成：通过浏览器DevTools促进调试和管理，启用数据检查，修改和清除。
• > 库支持：
>
• 虽然不向现代JavaScript特征诸如Promises和Async/等待等现代JavaScript功能，但库 bridge bridge bridge this Gap。
>
• 为什么选择客户端存储？ 虽然服务器端存储适用于大多数用户数据，但客户端存储是有利的：> idb
设备特定的设置：

UI首选项，光/暗模式等

>>短暂的数据：上传之前的临时数据。

>

>

脱机数据同步：

以后在低连接区域同步的数据。
• > 渐进式Web应用程序（PWAS）：
出于可用性或隐私原因的离线功能。
• 资产缓存：
通过缓存提高了性能。
浏览器存储API的比较：
• > >
> Web Storage：简单，同步的名称值对存储。适用于小的非关键数据（每个域5MB）。
• > >缓存API：存储HTTP请求/响应对，主要由服务工作者用于PWA CACHING（浏览器的存储变化）。>

indexeddb：用于数据，文件和blobs的客户端NOSQL数据库（每个域至少1GB，最多可能是可用磁盘空间的60％）。

>）。

indexeddb基础知识：

2015年标准化（2018年的API 2.0，开发中的API 2.0）

indexedDB享有广泛的浏览器支持。 本文重点介绍核心概念：

• 数据库：顶级容器。 访问仅限于相同的域。
>
• >对象存储：>相关数据的名称/值存储（例如MongoDB中的集合或SQL中的表）。
• 键：对象存储中每个记录的唯一标识符（可以自动生成或自定义）。>
自动启动：
• 在记录添加时自动增加键值。
索引：
• 在对象存储中组织数据以进行有效搜索。
架构：
• >定义对象存储，键和索引。
>版本：
• >架构更新的整数。>
操作：
• 数据库操作（crud）。>
交易：
• 包装操作以确保数据完整性（全部或全无）。>
光标：
• 通过记录有效地迭代，避免将所有内容加载到内存中。> >异步执行：
>操作异步运行，允许其他代码继续执行。>
• 示例数据结构（注记记录）：
>

indexedDB使用事件和回调，缺乏本机承诺和异步/等待支持（尽管之类的库提供了）。 通过DevTools进行调试：

：

<code class="language-javascript">{
  id: 1,
  title: "My first note",
  body: "A note about something",
  date: <date object>,
  tags: ["#first", "#note"]
}</date></code>

>浏览器DevTools（基于Chrome的浏览器中的应用程序选项卡，Firefox中的存储）对于检查，修改和清除索引索引数据是无价的。 idb

检查indexedDB支持和存储空间：

>

打开一个indexedDB连接：>

（随后的部分详细详细介绍了CRUD操作，模式更新和光标用法，但原始响应提供了全面的示例。

常见问题（常见问题解答）：

<code class="language-javascript">if ('indexedDB' in window) {
  // IndexedDB supported
} else {
  console.log('IndexedDB is not supported.');
}

(async () => {
  if (!navigator.storage) return;
  const estimate = await navigator.storage.estimate();
  const available = Math.floor((estimate.quota - estimate.usage) / 1024 / 1024);
  // Check available space and proceed accordingly
})();</code>

> 原始响应包括一个全面的常见问题解答部分，涵盖了最大存储大小，处理大数据集，存储限制超出限制，增加存储限制，使用情况检查，数据持久性，BLOB对象存储，安全性，工作人员使用和错误处理。 这些都是在原始输出中详细介绍的。>

以上是如何使用indexedDB将无限*数据存储在浏览器中的详细内容。更多信息请关注PHP中文网其他相关文章！