IndexedDB - 安装

IndexedDB - 设置你的开发环境

IndexedDB 的一个主要优势是它是一个内置于所有现代浏览器中的标准 Web API。你无需安装任何东西即可使用 IndexedDB。

然而，为了高效开发 Web 应用程序，你需要一个合适的开发环境。本章涵盖了使用 IndexedDB 的基本工具和实践。

1. 浏览器开发者工具

你的浏览器开发者工具是你最重要的资产。它们允许你直接检查、调试和清除你的 IndexedDB 数据库。

• 在 Chrome、Edge 或 Opera 中： 打开开发者工具 (F12 或 Ctrl+Shift+I)，转到Application（应用程序）选项卡，在“Storage”（存储）部分左侧菜单中查找 IndexedDB。你可以查看你的数据库、对象存储区、索引以及其中的数据。
• 在 Firefox 中： 打开开发者工具 (F12 或 Ctrl+Shift+I)，转到Storage（存储）选项卡，在左侧菜单中找到 IndexedDB。

2. 本地开发服务器

出于安全原因，当你直接从本地文件系统（使用 file:///... URL）打开 HTML 文件时，某些浏览器功能，包括 Web 存储和模块的某些方面，可能会表现不同或失败。最佳实践是始终通过本地 Web 服务器来提供你的项目。

一个简单、零配置的选项是 live-server，你可以在安装 Node.js/npm 后运行它：

# 1. 在终端中导航到项目的根目录
cd /path/to/your/project

# 2. 使用 npx 运行 live-server（无需安装）
npx live-server

这将启动一个服务器并自动在浏览器中打开你的项目。它还具有实时重载功能，这能极大地节省时间。

3. 使用辅助库（推荐）

原生 IndexedDB API 功能强大，但非常冗长，并且依赖于旧的基于事件的模型。这可能导致代码复杂、难以阅读（通常被称为“回调地狱”）。现代 JavaScript 开发者更喜欢基于 Promise 的 API，它与 async/await 结合使用效果极佳。

The Jake Archibald 的 idb 库是一个轻量级的小型封装，让 IndexedDB 使用起来非常愉快。我们强烈推荐它用于任何项目。

在你的项目中包含 idb

对于简单的项目或演示，你可以使用 ES 模块直接从 CDN 引入 idb：

<!-- 在你的 index.html 中 -->
<script type="module" src="main.js"></script>

// 在你的 main.js 中
import { openDB } from 'https://cdn.jsdelivr.net/npm/idb@7/build/esm/index.js';

// 现在你可以使用简化的 openDB 函数了！

对于大型应用程序，你通常会使用 npm（或其他包管理器）将其作为项目依赖项进行管理：

# 1. 安装 idb
npm install idb

# 2. 在 JavaScript 模块中导入它
import { openDB } from 'idb';

这种方法需要 Vite、Parcel 或 Webpack 等构建工具来为浏览器打包你的代码。