可通过Application面板或Console命令查看编辑localStorage：打开开发者工具→切至Application→展开Local Storage选域名查看键值对；或在Console中用getItem/setItem/clear等API操作，支持实时调试与批量管理。
如果您正在调试网页应用，需要确认当前页面是否正确写入或读取了本地存储数据，则可能是由于 localStorage 或 sessionStorage 未按预期生效。以下是查看 Chrome 浏览器中本地 Storage 数据的具体操作方法：
一、通过 Application 面板查看和编辑 Storage 数据
Chrome 开发者工具的 Application 面板是查看 localStorage 和 sessionStorage 最直观的方式，它以结构化表格形式展示所有键值对，并支持实时编辑与删除。
1、在目标网页上右键单击，选择“检查”，或直接按下快捷键 F12（Windows/Linux）或 Cmd+Opt+I（macOS）打开开发者工具。
2、点击顶部标签栏中的“Application”选项卡。
3、在左侧边栏中展开“Storage”节点，依次展开“Local Storage”或“Session Storage”子项。
4、点击当前网页对应的域名（如 https://example.com），右侧将列出全部键值对。
5、双击任意Key 或 Value 字段可直接修改；右键某一行可选择“Delete”移除条目；右键空白区域可选择“Add item”新增键值对。
二、通过 Console 控制台执行 JavaScript 命令操作
控制台提供编程式访问能力，适用于快速验证、批量读写或调试复杂逻辑，所有操作均作用于当前页面源（origin）的 Storage 对象。
1、打开开发者工具后，切换至“Console”标签页。
2、输入 localStorage.getItem('keyName') 获取指定键的字符串值。
3、输入 sessionStorage.getItem('keyName') 查看会话级存储内容。
4、使用 localStorage.setItem('key', 'value') 写入新数据，注意 value 必须为字符串；若需存对象，请先用 JSON.stringify() 序列化。
5、执行 localStorage.clear() 可清空当前源的所有 localStorage 数据；同理，sessionStorage.clear() 清空当前标签页的 session 数据。
三、通过 Chrome 设置查看全站存储占用与批量清理
该方式不显示具体键值内容，但能识别哪些网站占用了大量本地存储空间，适用于排查性能异常或隐私清理场景。
1、点击 Chrome 右上角三个圆点图标，进入“设置”。
2、在左侧菜单中选择“隐私和安全”，再点击“Cookie 及其他网站数据”。
3、滚动到底部，点击“查看所有网站数据和权限”。
4、页面将列出所有已存储数据的网站及其占用空间，可按大小排序，快速定位高占用站点。
5、在目标网站条目右侧点击垃圾桶图标，确认后即可一次性清除该网站全部本地数据（含 Cookie、Cache、IndexedDB、LocalStorage、SessionStorage 等）。
四、直接访问本地文件系统查看 SQLite 存储文件
Chrome 实际将 localStorage 数据以 SQLite 数据库格式保存在用户目录中，适用于高级分析或离线取证，但需外部工具解析。
1、关闭 Chrome 浏览器，确保无运行实例。
2、打开文件资源管理器，导航至以下路径：
Windows：C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\Default\Local Storage\
macOS：~/Library/Application Support/Google/Chrome/Default/Local Storage/
3、查找以网站域名命名、扩展名为 .localstorage 的文件（例如 https_example_com_0.localstorage）。
4、下载并安装 DB Browser for SQLite 工具，用其打开该文件。
5、在数据库中选择 "ItemTable" 表，即可看到原始的键（key）与值（value）字段内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
