在 devtools 中查看 localstorage 需切换到 application 标签、确保页面完全加载、确认当前域名与存储源一致；跨 iframe 或协议/子域不同均导致不可见；编辑双击单元格，删除选中后按 delete；clear() 无效多因执行环境非目标源或扩展干扰。
直接在 Chrome 或 Edge 的 DevTools 里点开 Application 标签就能看到 localStorage，不需要写代码、也不用装插件——但很多人点错位置或选错域名，导致“明明存了却看不到”。
为什么在 DevTools 里找不到 localStorage 数据
常见错误是：打开 DevTools 后停留在 Elements 或 Console 标签页，没切到 Application；或者页面还没加载完成就急着展开，Local Storage 子菜单还是灰色的。
- 必须确保当前页面已完全加载（URL 栏不转圈），否则
Local Storage列表可能为空或不可展开 - 左侧
Local Storage菜单下显示的是当前页面所在源（origin）的域名，比如http://localhost:3000和https://example.com是两个独立条目，不能互相查看 - 如果页面用了 iframe 且跨源，主页面的 DevTools 看不到子 iframe 的
localStorage，得单独打开 iframe 页面调试
怎么编辑或删除某个 localStorage 键值对
在 Application → Local Storage → [你的域名] 表格中，双击任意一列的单元格即可编辑；选中整行后按 Delete 键，或点击右上角的 删除已选取 按钮。
- 键名（Key）和值（Value）都支持直接双击修改，改完按回车确认
- 如果值是 JSON 字符串（如
{"user":"admin"}），DevTools 不会自动格式化，建议复制到编辑器里校验后再粘贴回去 - 误删后无法撤销，也没有回收站——除非你提前用
Export导出了备份（右键表格空白处可找到该选项）
localStorage.clear() 在控制台执行没反应？
执行 localStorage.clear() 后没报错，但刷新页面数据还在，大概率是因为你当前所在的控制台上下文不是目标页面源——比如你在 iframe 里执行，或 DevTools 打开时焦点不在主页面。
- 先确认顶部地址栏显示的是你要清空的页面 URL，再打开 DevTools
- 在
Console标签页右上角检查执行环境是否为<top frame></top>，不是iframe-name或其他上下文 - 执行前加个判断更稳妥：
if (localStorage.length > 0) localStorage.clear();，避免静默失败 - 某些浏览器扩展（如广告拦截器）会劫持
localStorageAPI，导致clear()无效，可尝试无痕模式复现
真正容易被忽略的是同源限制和执行时机：存的时候是 https://a.com，但调试时打开了 http://a.com（协议不同）或 https://www.a.com（子域不同），数据就天然隔离——这时候哪怕路径完全一样，DevTools 也绝不会显示出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
