存储检查器¶

存储检查器使您能够检查网页可以使用各种类型的存储。目前，它可以用于检查以下存储类型

缓存存储 — 使用 Cache API 创建的任何 DOM 缓存。
Cookie — 页面或页面内任何 iframe 创建的所有 Cookie。作为网络调用响应的一部分创建的 Cookie 也列出，但仅限于工具打开期间发生的调用。
IndexedDB — 页面或页面内任何 iframe 创建的所有 IndexedDB 数据库，它们的对象存储以及存储在这些对象存储中的项目。
本地存储 — 页面或页面内任何 iframe 创建的所有本地存储项目。
会话存储 — 页面或页面内任何 iframe 创建的所有会话存储项目。

目前，存储检查器仅为您提供存储的只读视图。但我们正在努力在未来的版本中让您编辑存储内容。

打开存储检查器¶

您可以通过在 Web 开发者工具中选择“存储”面板来打开存储检查器，该面板可从“浏览器工具”子菜单访问

该工具箱将出现在浏览器窗口底部，并激活存储检查器。在开发者工具箱中，它仅称为“存储”。

../../_images/storage_inspector.png

存储检查器用户界面¶

存储检查器 UI 分为三个主要组件

存储树
表格组件
侧边栏

../../_images/storage_labeled.png

存储树¶

存储树列出了存储检查器可以检查的所有存储类型

../../_images/storage_types.png

在每种类型下，对象按来源组织。对于 Cookie，协议不会区分来源。对于 Indexed DB 或本地存储，来源是协议 + 主机名的组合。例如，“http://mozilla.org”和“https://mozilla.org”是两个不同的来源，因此本地存储项不能在它们之间共享。

在“缓存存储”下，对象按来源然后按缓存名称组织

../../_images/cache_storage.png

IndexedDB 对象按来源、数据库名称然后按对象存储名称组织

../../_images/indexeddb_storage.png

对于 Cookie、本地存储和会话存储类型，层次结构中只有一级，因此存储的项目直接列在每个来源下

../../_images/cookie_storage.png

您可以单击树中的每个项目以展开或折叠其子项。该树是实时的，因此如果添加了新的来源（例如，通过添加 iframe），它将自动添加到每个存储类型中。

单击树项目将在右侧的表格组件中显示有关该项目的详细信息。例如，单击作为 Cookie 存储类型子项的来源将显示属于该域的所有 Cookie。

搜索¶

表格组件顶部有一个搜索框

../../_images/storage_detail_filter.png

这会过滤表格，仅显示与搜索词匹配的项目。如果任何字段（包括已隐藏列的字段）包含搜索词，则项目与搜索词匹配。

您可以使用 Ctrl + F（在 Mac 上为 Cmd + F）来聚焦搜索框。

添加和刷新存储¶

您还将可以使用按钮添加新的存储条目或刷新当前查看的存储类型的视图（您无法向 IndexedDB 或 Cache 添加新条目）

../../_images/storage_detail_add_refresh.png

侧边栏¶

当您在存储表格组件中选择任何行时，将显示侧边栏，其中包含有关该行的详细信息。如果选择了 Cookie，它将列出有关该 Cookie 的所有详细信息。

侧边栏可以解析 Cookie 或本地存储项或 IndexedDB 项的值，并将其转换为有意义的对象，而不仅仅是字符串。例如

类似 '{"foo": "bar"}' 的字符串化 JSON 显示为原始 JSON：{foo: "bar"}。
包含分隔值的字符串，例如 "1~2~3~4" 或 "1=2=3=4" 显示为数组：[1, 2, 3, 4]。
包含键值对的字符串，例如 "ID=1234:foo=bar" 显示为 JSON：{ID:1234, foo: "bar"}。

显示的值也可以使用侧边栏顶部的搜索框进行过滤。

使用存储检查器¶

以下文章涵盖了使用存储检查器的不同方面