blob: a10fa13f8dc984d4eb3e978c93e55b5fee2e58fd (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
---
title: 存储查看器
slug: Tools/Storage_Inspector
translation_of: Tools/Storage_Inspector
original_slug: Tools/存储查看器
---
<div>{{ToolsSidebar}}</div>
<p>存储查看器使你能够查看网页使用的多种存储类型。如今，它能够查看如下存储类型：</p>
<ul>
<li><em>Cache缓存</em> — 使用缓存API创建的任何DOM缓存</li>
<li><em>Cookies</em> — 所有页面创建的cookies或页面中任何的iframes。还列出了<span id="result_box" lang="zh-CN"><span>作为网络呼叫响应的一部分创建的Cookie，但仅适用于工具打开时发生的响应</span></span></li>
<li><em>IndexedDB</em> — 所有页面创建的IndexedDB或或页面中任何的IndexedDB。<span id="result_box" lang="zh-CN"><span>其对象存储以及存储在这些对象库中的项目。</span></span></li>
<li><em>本地存储</em>— 所有页面创建<em>的本地存储</em>或页面中任何的iframes。</li>
<li><em>Session存储</em>—所有页面创建的Session或页面中任何的iframes。</li>
</ul>
<p><span id="result_box" lang="zh-CN"><span>目前，Storage Inspector仅为您提供存储的只读视图。</span> <span>但我们正努力让您在将来的版本中编辑存储内容。</span></span></p>
<h2 id="打开存储查看器">打开存储查看器</h2>
<p>你可以在火狐菜单面板（或工具菜单中显示菜单栏或在 Mac OS X 上）或在键盘上按Shift + F9的web开发者工具的子菜单上打开“存储查看器”</p>
<p>工具箱显示在浏览器窗口的底部，当打开存储查看器，在工具箱中会被称为“存储”</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14247/1-storage-inspector-open.png" style="display: block; height: 846px; margin-left: auto; margin-right: auto; width: 1311px;"></p>
<h2 id="存储查看器用户接口">存储查看器用户接口</h2>
<p>存储查看器UI被分为三个主要部分：</p>
<ul>
<li><a href="#storage-tree">存储树</a></li>
<li><a href="#table-widget">表部件</a></li>
<li><a href="#sidebar">侧边栏</a></li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/14249/2-storage-inspector-annotated.png" style="display: block; height: 858px; margin-left: auto; margin-right: auto; width: 1323px;"></p>
<h3 id="存储树"><a name="storage-tree">存储树</a></h3>
<p>存储树列出了存储查看器能够查看的所有存储类型:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14251/3-storage-types.png" style="display: block; height: 166px; margin-left: auto; margin-right: auto; width: 386px;"></p>
<p>在每种类型下，对象都是按源组织。对于cache，协议不会区分源。对于IndexedDB或本地存储，源由协议与主机名组成。举个栗子，"http://mozilla.org" and "https://mozilla.org" 是两个不同的源，所有本地存储项不能在它们之间共享。</p>
<p>在“缓存存储”下，对象按域名和cache的名称进行组织：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14253/4-cachestorage.png" style="display: block; height: 210px; margin-left: auto; margin-right: auto; width: 350px;"></p>
<p>IndexedDB对象按源组织，然后按数据库名称，最后按对象存储名称：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14255/5-indexeddb.png" style="display: block; height: 360px; margin-left: auto; margin-right: auto; width: 350px;"></p>
<p>关于Cookies,本地存储和Session存储类型,层级结构它们只有一个级别, 因此存储项直接列在每个域名下</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14257/6-cookies.png" style="display: block; height: 598px; margin-left: auto; margin-right: auto; width: 350px;"></p>
<p>你可以点击树中的每个项去扩展或折叠它的子项.树是活动的，所有如果添加一个新的源(例如通过添加iframes)，它将自动添加到每个存储类型中。</p>
<p>点击一个树项目将在右侧的表部件显示所选项的具体信息。例如点击Cookies存储类型下的源，将会显示所有属于该域名下的cookies信息。</p>
<h3 id="表部件"><a name="table-widget">表部件</a></h3>
<p>表部件是列出与所选树项（不管是域名还是数据库）一致的所有项的位置。根据存储类型和树项的不同，表中的列数也会有所不同。</p>
<p>所有表部件的列都可以调整大小的，你可以通过表头的内容-点击去隐藏和显示列和选择你想看到的列。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14259/7-col-selection.png" style="display: block; height: 594px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<h3 id="搜索">搜索</h3>
<p>在表部件的顶部有一个搜索框:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14261/8-search.png" style="display: block; height: 646px; margin-left: auto; margin-right: auto; width: 912px;"></p>
<p>它将对表进行过滤，只显示与搜索项匹配的项。如果它们的任何字段(包括您隐藏的列的字段)包含搜索项。</p>
<p>从火狐50版本之后, 你可以使用<kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac) 来显示搜索框.</p>
<h3 id="添加和更新存储">添加和更新存储</h3>
<p>在最新版本的火狐浏览器中，你还可以使用按钮去刷新当前查看到的存储类型视图，而且在适用情况下添加一个存储条目(你不能在IndexedDB或cache添加新的条目):<img alt="" src="https://mdn.mozillademos.org/files/15812/add-refresh-storage.png" style="display: block; margin: 0 auto;"></p>
<h3 id="侧边栏"><a name="sidebar">侧边栏</a></h3>
<p>当你在存储表部件选择任何一行时，侧边栏就会显示所选行的详细信息。如果选中cookie，侧边栏将列出该cookie的所有详细信息</p>
<p>侧边栏能够解析cookie的值或本地存储项或IndexedDB项，并且将其转换成有意义的对象而不仅仅是字符串。举个栗子:</p>
<ul>
<li>一个JSON字符串比如 <code>'{"foo": "bar"}'</code>会以JSON对象显示 <code>{foo: "bar"}</code>.</li>
<li>一个包含键分隔符的字符串，例如 <code>"1~2~3~4"</code> 或 <code>"1=2=3=4"</code> 会显示成数组: <code>[1, 2, 3, 4]</code>.</li>
<li>一个包含键值对的字符串，比如<code>"ID=1234:foo=bar"</code> 会显示为JSON对象: <code>{ID:1234, foo: "bar"}</code>.</li>
</ul>
<p>还可以使用工具箱侧边栏顶部的搜索框过滤显示的值</p>
<h2 id="Cache_存储">Cache 存储</h2>
<p>在Cache存储类型下，你能够看到使用Cache API创建的任何DOM缓存的内容。如果你选择一个cache，你将看到该caches包含的资源列表。对应每个资源，你能看到如下信息：</p>
<ul>
<li>资源的URL路径</li>
<li>获取请求的状态码</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/14263/9-cachedstorage-details.png" style="display: block; height: 213px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<h2 id="Cookies">Cookies</h2>
<p>当你从存储树中选择Cookies存储类型的一个源时，会在表格小部件中列出该cookies的所有源。cookies表有以下列：</p>
<ul>
<li><em>Name</em>— cookie的名称</li>
<li><em>Path </em>— cookie的路径属性</li>
<li><em>Domain</em> — cookie的域</li>
<li><em>Expires on</em> — cookie过期时间，如果cookie是session, 此列的值将为session</li>
<li><em>Last accessed on</em> — 上次读取cookies的时间</li>
<li>Created on — cookie创建时间</li>
<li><em>Value</em> — cookie的值</li>
<li><em>HostOnly </em>— 这个cookie是不是一个域的cookie，如果是，域名以“.”为开头</li>
<li><em>Secure </em>— cookie是不是安全的</li>
<li><em>HttpOnly </em>— cookie是不是 HTTP only</li>
<li><em>同一站点</em> — <span id="result_box" lang="zh-CN"><span>这个cookie是同一站点的cookie吗？</span> <span>相同站点cookie允许服务器通过断言特定cookie应仅与同一可注册域发起的请求一起发送来减轻CSRF和信息泄漏攻击的风险。</span></span></li>
</ul>
<div class="note">
<p><strong>提示</strong>: 有一些列不会默认显示 — 如果要改变部分列的显示,在已有的表格标题上单击鼠标右键/<kbd>Ctrl</kbd>-鼠标左键，而后使用生成的上下文菜单显示/隐藏列</p>
</div>
<p><span id="result_box" lang="zh-CN"><span>您可以通过双击表格小组件中的单元格内部并编辑它们包含的值来编辑cookie，并通过单击“加号”（+）按钮添加新的cookie，然后将生成的新行编辑为所需的值。</span><br>
<br>
<span>您还可以使用每行上下文菜单删除cookie：</span></span> <img alt="" src="https://mdn.mozillademos.org/files/14273/delete-cookies.png" style="display: block; height: 208px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<h2 id="本地存储Session存储">本地存储/Session存储</h2>
<p><span id="result_box" lang="zh-CN"><span>当选择与本地存储或会话存储相对应的源时，该表将列出与本地存储或会话存储相对应的所有项的名称和值。</span></span></p>
<p><span lang="zh-CN"><span>您可以通过双击</span></span><a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a><span lang="zh-CN"><span>中的单元格内部并编辑它们包含的值来编辑本地和会话存储项：</span></span></p>
<p>{{EmbedYouTube("oeQzhpoMByw")}}</p>
<p><span id="result_box" lang="zh-CN"><span>您还可以使用上下文菜单删除本地存储和会话存储条目：</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14275/14-delete-localstorage.png" style="display: block; height: 444px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p><span id="result_box" lang="zh-CN"><span>最后，您可以通过单击“加号”（+）按钮添加新的存储项，然后将生成的新行编辑为所需的值。</span></span></p>
<h2 id="IndexedDB">IndexedDB</h2>
<p><span id="result_box" lang="zh-CN"><span>在存储树中的索引数据库存储类型中选择源时，该表列出了该源存在的所有数据库的详细信息。</span> <span>数据库具有以下详细信息：</span></span></p>
<ul>
<li><em>Database Name</em> — 数据库名称</li>
<li><em>Storage</em> — <span id="result_box" lang="zh-CN"><span>为数据库指定的存储类型（Firefox 53中的新增功能）</span></span></li>
<li><em>Origin</em> — 数据库的源</li>
<li><em>Version</em> — <span id="result_box" lang="zh-CN"><span>数据库版本</span></span></li>
<li><em>Object Stores</em> — <span id="result_box" lang="zh-CN"><span>数据库中的对象存储数目</span></span></li>
</ul>
<p><span id="result_box" lang="zh-CN"><span>在存储树中选择IndexedDB数据库时，表中列出了有关所有对象存储的详细信息。</span> <span>任何对象存储都具有以下详细信息：</span></span></p>
<ul>
<li><em>Object Store Name</em> — 对象库的名称</li>
<li><em>Key</em> — 对象库的keyPath属性.</li>
<li><em>Auto Increment</em> — 是否启动自动增量</li>
<li><em>Indexes</em> — <span id="result_box" lang="zh-CN"><span>对象库中存在的索引数组，如下所示</span></span></li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/14265/10-indexeddb-details.png" style="display: block; height: 205px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p><span id="result_box" lang="zh-CN"><span>在存储树中选择对象库时，该对象库中的所有项都列在表中。</span> <span>所有项目都有一个键和一个与之关联的值。</span></span></p>
<p><span id="result_box" lang="zh-CN"><span>从Firefox 49开始，您可以使用存储树视图中的上下文菜单删除IndexedDB数据库：</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14277/15-delete-database.png" style="display: block; height: 194px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p><span id="result_box" lang="zh-CN"><span>如果无法删除数据库（最常见的原因是仍存在与数据库的活动连接），则存储查看器中将显示一条警告消息：</span></span> <img alt="" src="https://mdn.mozillademos.org/files/14267/11-indexeddb-delete-warning.png" style="display: block; height: 255px; margin: 0px auto; width: 900px;"></p>
<p><span id="result_box" lang="zh-CN"><span>从Firefox 50开始，您可以使用表格小部件中的上下文菜单删除对象库或特定项目中的所有项目：</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14279/16-delete-database-entries.png" style="display: block; height: 195px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p> </p>
|
