Application面板里localStorage数据不更新是怎么回事?

UX春彦 阅读 12

我在React组件里用useEffect往localStorage存了个用户ID,但打开DevTools的Application面板看,Local Storage里还是空的,明明代码执行了也没报错,这是为啥?

我试过手动刷新页面、重启DevTools,甚至换浏览器都不行。代码逻辑看起来没问题啊:

useEffect(() => {
  const userId = 'user123';
  localStorage.setItem('userId', userId);
  console.log(localStorage.getItem('userId')); // 控制台能打印出 user123
}, []);

控制台都能正常读到值,但Application面板就是不显示,是不是我哪里漏看了?

我来解答 赞 4 收藏
二维码
手机扫码查看
1 条解答
程序员贝贝
你这问题我见过好几次了,八成是 localStorage 没问题,是 DevTools 的缓存坑你。

DevTools 的 Application 面板里的 Local Storage 列表有时候不会实时刷新,特别是你刚在代码里 setItem 后,它可能还停留在旧状态。先试试这几个动作:

1. 在控制台手动执行 localStorage.getItem('userId'),确认值确实存在
2. 然后在 Application 面板里,点击一下 Local Storage 左侧的域名节点(就是你站点那一行),强制刷新整个面板
3. 如果还不动,把 DevTools 从右侧/下方切到新窗口打开,再切回来——这招能强制重绘

要是切完还是空的,再加个断点调试看看:在 localStorage.setItem 后面打个断点,等断住时,打开控制台手动查 localStorage.lengthObject.keys(localStorage),看键是不是真的写了进去。

真要是代码执行了、控制台能读、DevTools 就是不显示,那大概率是 DevTools 自己抽风,重启浏览器或者换个无痕窗口试试——我有一次在 Chrome 125 版本遇到过这 bug,重开一次就好了。
点赞 6
2026-02-25 14:13