本地存储编辑器提供简洁的表格界面,用于管理当前网站的 localStorage 和 sessionStorage 条目。浏览所有键值对,内联编辑值,添加新条目,删除不需要的条目。JSON 值会被自动检测并格式化以便阅读。通过标签页切换 localStorage 和 sessionStorage,统一管理两种存储类型。
Web 应用程序在 localStorage 和 sessionStorage 中存储了大量状态——用户偏好、认证令牌、功能开关、A/B 测试分组、购物车内容、表单草稿、缓存的 API 响应以及 UI 状态。在 Chrome 开发者工具中调试这些值需要导航至 Application 标签页,找到 Storage 区域,并使用编辑能力有限的基础键值查看器。本地存储编辑器将这些功能整合到一个专用面板中,支持标签页切换存储类型、内联编辑、JSON 自动格式化和批量操作。表格显示每个键值对的键名和值。JSON 值(极为常见——通过 JSON.stringify 序列化的对象)会被自动检测,并以正确格式和语法高亮展示。点击任意值可原位编辑——修改立即写入存储 API。通过简洁的表单添加新条目,或单独删除或批量删除条目。
通过面板顶部的标签按钮在 localStorage 和 sessionStorage 之间切换。每个标签页显示条目数量(例如"localStorage (12)" / "sessionStorage (3)")。两种存储类型均可在同一界面中管理。
点击任意值单元格可原位编辑。对于简单值,直接输入新字符串;对于 JSON 值,编辑器会展开为带语法高亮的格式化文本框。修改立即保存至存储 API。
JSON 值(通过 JSON.stringify 序列化的对象和数组)被自动检测,并以正确的缩进和语法高亮展示。可直接编辑格式化后的 JSON——保存时会重新序列化。
点击"添加条目"创建新的键值对。输入键名和值(字符串或 JSON)。条目立即写入当前域名的 localStorage 或 sessionStorage。
通过行内删除按钮删除单个条目,或使用"清空全部"移除当前存储类型的所有条目。在测试时重置应用状态非常实用。
在编辑器中所做的修改会立即反映到应用程序中。如果应用在用户交互时从 localStorage 读取某个值,在面板中修改该值后,应用下次读取时即可获得新值——大多数情况下无需重新加载页面。
检查应用程序在 localStorage 中存储了哪些值。认证令牌是否存在?用户偏好对象的结构是否正确?是否有过期的缓存值导致了意外行为?
清空所有 localStorage 可将应用程序重置至初始状态——非常适合测试首次运行体验、引导流程和默认配置,且不影响其他网站的浏览器数据。
许多应用程序将功能开关的值存储在 localStorage 中。直接编辑这些值即可启用或禁用功能,无需通过开关管理界面或重新部署。
编辑存储的用户偏好、主题设置、语言选择或引导完成标记,模拟不同的用户状态,测试应用程序对各种状态的处理方式。
查看第三方脚本(分析、聊天、广告)在您域名的 localStorage 中存储了哪些数据。审查数据以确保隐私合规,并发现意外的存储使用情况。
打开 DevSuite Pro 浮动工具栏,点击本地存储编辑器图标。面板随即打开,显示当前域名的所有 localStorage 条目。
滚动查看键值表格。JSON 值会自动格式化。切换标签页可查看 sessionStorage。
点击任意值可内联编辑。对于 JSON 值,会出现格式化编辑器。修改立即保存至存储 API。
点击"添加条目"创建新的键值对。点击任意行的删除图标将其移除。"清空全部"可删除所有条目。
编辑存储值后,与页面交互,观察应用程序如何响应已更改的数据。