你在调试网页时，有没有碰到过需要查看或修改浏览器的用户偏好、登录状态或应用配置？这种本地数据通常存在 LocalStorage 里。Chrome 开发者工具提供了 三种方式 让你轻松搞定，各有妙用：

• Application 面板：图形化操作
• Console 命令行：适合批量处理
• 直接访问 localStorage 对象：快速一览全貌

下面一步一步来说。

一、使用 Application 面板查看和编辑 LocalStorage

对于不想写代码、只想快速增删改查的场景，Application 面板是最友好的选择。它把所有键值对像表格一样摊开，双击就能改，右键就能添。

具体操作步骤：

1. 打开谷歌浏览器，访问目标页面。
2. 在页面空白处右键单击，选择“检查”，或按快捷键 F12（笔记本可能需要配合 Fn 键），调出开发者工具。
3. 点击顶部标签栏的 Application 选项卡。
4. 在左侧边栏展开 Storage 区域，再点开下面的 Local Storage。
5. 在 Local Storage 子项里，点击当前页面的完整域名（比如 https://example.com）。
6. 右侧主区域会列出所有键值对。
   • 想改某个值？直接 双击 Value 列的单元格 即可编辑。
   • 想加一条新数据？右键空白处选择“Add item” 即可。
7. 删除某一条：右键对应行后选择“Delete”。如果想清空该域名下的全部数据，右键域名名称后选择“Clear”，一气呵成。

二、通过 Console 执行 JavaScript 命令操作 LocalStorage

当你需要批量处理、动态计算值，或者想直接用脚本搞定的时候，Console 命令行就是你的好搭档。利用原生的 localStorage API，你可以精准控制每一个键值对。

注意：存对象之前记得先用 JSON.stringify() 处理一下。

具体操作步骤：

1. 确保目标网页已打开，通过右键“检查”或 F12 启动开发者工具。
2. 切换到顶部的 Console 标签页。
3. 输入 localStorage.getItem('keyName') 查看指定键的值。
4. 输入 localStorage.setItem('keyName', 'newValue') 设置或更新键值对。注意值必须是字符串，如果要存对象，先用 JSON.stringify() 转换。
5. 输入 localStorage.removeItem('keyName') 删掉单个键值对。
6. 输入 localStorage.clear() 可以彻底清除该源下的所有 LocalStorage 数据——这个操作不可撤销，下手前请三思。

三、直接在 Console 中访问 localStorage 对象

如果只是想快速扫一眼当前页面到底存了哪些东西，不需要编辑，那这个方法最直接。它还能帮你排查键名拼写错误或大小写问题，效率很高。

具体操作步骤：

1. 打开目标网页并调出开发者工具，切换到 Console 标签页。
2. 直接输入 localStorage 并回车，控制台会输出一个 Storage 实例对象。
3. 点击返回对象上的展开箭头，就能逐层查看所有键名及其原始字符串值。
4. 如果想快速确认某个键是否存在，可以输入 Object.keys(localStorage) 获取全部键名数组，再配合 includes() 方法做判断，非常方便。

《夸克》非常好用的免费AI浏览器

下载APP查看