Chrome DevTools Application 面板如何检查 Web Storage：区分 Local Storage 与 Session Storage

页面明明刚写入数据，刷新后却找不到；或者退出当前页面后，临时状态仍然存在。遇到这类问题，先不要猜业务代码，直接打开 Chrome DevTools 的 Application 面板看实际存储区。最容易混淆的边界是：Local Storage 会跨浏览器会话保留，Session Storage 则在页面会话结束时清理。本文只讲查看、筛选和清理 Web Storage 的操作结果。

步骤一：打开 Application 面板并确认存储入口

在目标网页按 F12 或右键选择“检查”，打开 DevTools。若顶部没有 Application，点击面板右侧的更多面板入口再选择 Application。进入后，在左侧展开 Storage，下面通常能看到 Local Storage 和 Session Storage。

这里先确认两件事：第一，DevTools 绑定的是正在排查的页面；第二，左侧显示的域名与地址栏中的站点一致。一个页面可能涉及多个子域名，选错域名时，表格为空并不代表代码没有写入数据。

步骤二：进入 Local Storage 查看键值

展开 Local Storage，点击目标域名。右侧会出现键值表，常见列包括 Key 和 Value。点击任意一行，表格下方会显示所选值的预览。官方文档还提供了手动 Refresh 入口：当页面刚执行完写入操作而表格没有变化时，可以点击操作栏中的刷新按钮重新读取。

不要只看值的开头就下结论。JSON 字符串、压缩后的配置或较长令牌可能在表格中被截断，选中条目后再看下方预览更可靠。若同一键名在不同域名下都出现，仍应以当前页面所属域名为准。

步骤三：用筛选框定位，再判断是否需要编辑

键值较多时，直接滚动表格容易漏项。使用表格上方的过滤框，输入一段字符串即可筛选出键名或值中包含这段字符串的条目。例如排查主题设置，可以输入 theme；排查某个状态值，则可以输入值中的一小段文本。

如果确认要临时改值，双击 Key 或 Value 单元格，输入新内容后刷新页面让页面重新读取。这个动作适合验证“某个前端分支在另一种存储状态下是否成立”，不等于修改了服务端数据，也不应直接当作正式修复。

步骤四：切换 Session Storage，区分页面会话边界

Session Storage 的查看方式几乎相同：展开 Session Storage，点击同一个域名，再看键值表和下方预览。区别在生命周期：官方说明中，Session Storage 会在页面会话结束时清除；Local Storage 则会跨浏览器会话保存。因此，关闭或结束页面会话后数据消失，不能仅凭这一现象判断写入失败，先确认代码使用的是哪一种存储。

步骤五：删除前确认范围，并用刷新观察结果

只想删除一条时，先点击目标键值行，再点击操作栏中的 Delete。需要清空当前类型下的所有条目时，才使用 Clear all。两者都作用于当前选中的域名和存储区，不会替代数据库回滚，也不会自动清理另一个存储类型。

清理后刷新页面，观察应用是否重新生成默认值、显示未登录状态或回到首次访问流程。如果页面刷新后条目又出现，说明页面脚本可能在启动时重新写入；这时应回到 Sources 或 Console 追踪写入调用，而不是重复点击 Clear all。

常见问题

为什么 Application 里看不到刚写入的键？先确认域名、存储类型和执行上下文，再点击 Refresh；跨子域名查看时，必须选择实际写入的域名。

删掉 Local Storage 后为什么刷新又回来了？删除只改变了当前浏览器中的存储内容，页面初始化脚本可能按默认配置再次写入；需要继续定位触发写入的代码。

需要查 Web Storage 时，按“选域名—选类型—筛选—预览—再清理”的顺序操作即可。更多边界可参考 Chrome DevTools Local Storage 官方文档 和 Session Storage 官方文档。