← 返回功能
Free

本地存储编辑器

本地存储编辑器提供简洁的表格界面,用于管理当前网站的 localStorage 和 sessionStorage 条目。浏览所有键值对,内联编辑值,添加新条目,删除不需要的条目。JSON 值会被自动检测并格式化以便阅读。通过标签页切换 localStorage 和 sessionStorage,统一管理两种存储类型。

Web 应用程序在 localStorage 和 sessionStorage 中存储了大量状态——用户偏好、认证令牌、功能开关、A/B 测试分组、购物车内容、表单草稿、缓存的 API 响应以及 UI 状态。在 Chrome 开发者工具中调试这些值需要导航至 Application 标签页,找到 Storage 区域,并使用编辑能力有限的基础键值查看器。本地存储编辑器将这些功能整合到一个专用面板中,支持标签页切换存储类型、内联编辑、JSON 自动格式化和批量操作。表格显示每个键值对的键名和值。JSON 值(极为常见——通过 JSON.stringify 序列化的对象)会被自动检测,并以正确格式和语法高亮展示。点击任意值可原位编辑——修改立即写入存储 API。通过简洁的表单添加新条目,或单独删除或批量删除条目。

实时预览
example.com
localStorage (6) sessionStorage (2) + Add Entry
KeyValue
ds_license_keyPRO-XXXX-XXXX
themedark
user_prefs{"lang":"en","notifications":true,"sidebar":"collapsed"}
last_visited2026-04-08T10:30:00Z
cart_items[{"id":1,"qty":2},{"id":5,"qty":1}]
onboardingcompleted
Click any value to edit · JSON values are auto-formatted
关键功能

标签页切换存储类型

通过面板顶部的标签按钮在 localStorage 和 sessionStorage 之间切换。每个标签页显示条目数量(例如"localStorage (12)" / "sessionStorage (3)")。两种存储类型均可在同一界面中管理。

内联值编辑

点击任意值单元格可原位编辑。对于简单值,直接输入新字符串;对于 JSON 值,编辑器会展开为带语法高亮的格式化文本框。修改立即保存至存储 API。

JSON 自动检测与格式化

JSON 值(通过 JSON.stringify 序列化的对象和数组)被自动检测,并以正确的缩进和语法高亮展示。可直接编辑格式化后的 JSON——保存时会重新序列化。

添加新条目

点击"添加条目"创建新的键值对。输入键名和值(字符串或 JSON)。条目立即写入当前域名的 localStorage 或 sessionStorage。

单条与批量删除

通过行内删除按钮删除单个条目,或使用"清空全部"移除当前存储类型的所有条目。在测试时重置应用状态非常实用。

实时同步

在编辑器中所做的修改会立即反映到应用程序中。如果应用在用户交互时从 localStorage 读取某个值,在面板中修改该值后,应用下次读取时即可获得新值——大多数情况下无需重新加载页面。

常见用例

调试应用状态

检查应用程序在 localStorage 中存储了哪些值。认证令牌是否存在?用户偏好对象的结构是否正确?是否有过期的缓存值导致了意外行为?

重置应用状态

清空所有 localStorage 可将应用程序重置至初始状态——非常适合测试首次运行体验、引导流程和默认配置,且不影响其他网站的浏览器数据。

测试功能开关

许多应用程序将功能开关的值存储在 localStorage 中。直接编辑这些值即可启用或禁用功能,无需通过开关管理界面或重新部署。

模拟不同用户状态

编辑存储的用户偏好、主题设置、语言选择或引导完成标记,模拟不同的用户状态,测试应用程序对各种状态的处理方式。

检查第三方存储

查看第三方脚本(分析、聊天、广告)在您域名的 localStorage 中存储了哪些数据。审查数据以确保隐私合规,并发现意外的存储使用情况。

如何使用
1

激活本地存储编辑器

打开 DevSuite Pro 浮动工具栏,点击本地存储编辑器图标。面板随即打开,显示当前域名的所有 localStorage 条目。

2

浏览条目

滚动查看键值表格。JSON 值会自动格式化。切换标签页可查看 sessionStorage。

3

编辑值

点击任意值可内联编辑。对于 JSON 值,会出现格式化编辑器。修改立即保存至存储 API。

4

添加或删除条目

点击"添加条目"创建新的键值对。点击任意行的删除图标将其移除。"清空全部"可删除所有条目。

5

测试应用行为

编辑存储值后,与页面交互,观察应用程序如何响应已更改的数据。

准备好尝试了吗? 本地存储编辑器?

免费安装 DevSuite Pro,为您的浏览器解锁 39 多个开发者工具。

添加到 Chrome 添加到 Edge 添加到 FireFox