IndexedDB 是一种W3C 工作草案,令 JavaScript 开发人员可以存储、搜索并检索用户本地客户端上的数据,即便未启用 Internet 连接的情况下也可以。本博文介绍 IDBExplorer,我们在内部利用该工具调试 IndexedDB 应用程序。利用 IDBExplorer,您可以查看数据库架构、对象存储内容和索引详细信息。
通过一个 IndexedDB 应用程序示例了解该工具
为了更好地演示说明,我使用 IndexedDB 创建了一个应用程序,用于跟踪我的新年计划。它在本地存储并访问我的计划(在系统上浏览网页),并允许我添加或编辑计划。[Done That](完成)按钮会将选定的计划从列表中移除,并从数据库中移除其内部表现形式。
![利用 IndexedDB 跟踪新年计划的应用程序的部分屏幕截图](https://i-blog.csdnimg.cn/blog_migrate/66111108dae013314cc8fcebff1b8c9f.jpeg)
IndexedDB 将某个数据库定义为信息的容器。每个数据库均包含对象存储,用作 JavaScript 对象的存储库。每个对象均包含可以利用 API 进行查询的特性。如果您对关系数据库熟悉,对象存储可以等同于表,对象存储中的每个 JavaScript 对象表示一个记录。不过,IndexedDB 对象存储中存储的对象都被视为不透明实体。另外,这些对象都无需包含相同的属性。
如果JavaScript 对象与关系数据库记录相似,则该对象的属性可以被认为是表中的列(或字段)。结果,IndexedDB 允许您定义标识对象属性的索引,用于在对象存储中搜索记录。因此,索引允许您使用 JavaScript 对象的特性值遍历并搜索 IndexedDB 数据。
IndexedDB 允许每个域具有多个数据库。此示例使用一个数据库:“NewYear”。该应用程序在 NewYear 数据库中名为“Resolutions”的对象存储中存储我的计划。每个计划都是具有以下特性的 JavaScript 对象:
◆ priorityId:将计划分成不同的优先级
◆ name:计划的名称
◆ occurrenceId:跟踪计划的活动的执行频率
◆ dueDate:计划的完成日期
◆ createdDate:计划添加到对象存储的内部日期
◆ categoryId:定义计划的活动类型
请注意,并不是所有特性在应用程序的 UI 中都是可见的。在某些情况下,他们仅供内部使用(如 createdDate)。
下面是 IDBExplorer 工具显示“Resolutions”对象存储的内容的方式:
![IDBExplorer 工具的部分屏幕截图,显示“Resolutions”对象存储的内容](https://i-blog.csdnimg.cn/blog_migrate/6120d7133c30c766fde1d6d6d24d90a4.png)
“Resolutions”对象存储还包含名为“priorityId”的 priorityId 特性的索引,利用该索引应用程序可以使用priorityId 属性查询对象。每个 priorityId 值的描述位于“Priorities”对象存储内,occurrenceId 值的描述位于“Occurrences”对象存储内。类似地,categoryId 值的描述位于“Categories”对象存储内。
该工具使用一个树层次结构来说明上述关系:
![IDBExplorer 工具的屏幕截图,显示数据库中有五个计划](https://i-blog.csdnimg.cn/blog_migrate/55892ecd537f2f2bf91f637d27ce2bce.png)
IDBExplorer 工具显示数据库中有五个计划(两个高优先级任务,两个中优先级任务和一个低优先级任务)。
利用该应用程序,我可以添加一个新计划:
该应用程序利用光标从 Occurrence、Priority 和 Category 字段的各自对象存储中检索这些字段的值,并将这些值显示给用户。IDBExplorer 工具允许您查看这些值在对象存储中存在的方式。例如,选择 Categories 对象存储会显示可用的类别及其描述:
![IDBExplorer 工具的屏幕截图,显示值在对象存储中的存在方式](https://i-blog.csdnimg.cn/blog_migrate/85f1a86cc966407000c43478ef1cce53.png)
您可以在“WorkOn”屏幕中选择某个计划,并选择 [Edit](编辑),对该计划进行更新。进行任意更改后,选择 [Update](更新)按钮将提交这些更改,并在“Resolutions”对象存储中更新这些值。
在您的应用程序中使用 IDBExplorer
您可以在您的 Metro 风格应用程序或网站中包括 IDBExplorer 工具。不过,我们建议您不要在您的应用程序中部署该工具。
要将该工具添加到您的网站,请将 IDBExplorer 软件包的内容复制并解压到您的网站。您的应用程序需要利用 iframe 元素或一个新窗口链接到 IDBExplorer 文件夹内包含的 IDBExplorer.html 文件。
在我们的示例中,我们决定在 iframe 元素内承载 IDBExplorer。.不过,对于常规开发,我们建议在一个新窗口内承载此 URI。当您调试数据库和应用程序时,不会影响您网站的用户界面,实现了并行的用户体验。
当承载 IDBExplorer 时,您需要使用查询字符串传递数据库名称。在此示例中,是通过利用 iframe 元素的 src 特性来实现的:
- <iframe id="debuggerId" class="debuggerContainer" src="IDBExplorer/IDBExplorer.html?name=NewYear"></iframe>
当计划在 Metro 风格应用程序中承载此功能时,请切记 Metro 风格程序是全屏幕运行的。因此,您应该导航到此 URL,而不是打开一个新窗口(您将需要向 IDBExplorer.html 文件中添加一个 [Back](返回)按钮,以便能够返回您的应用程序)。另外,您可以添加一个 iframe 元素并在该元素中显示该工具。