Application面板里localStorage数据不更新是怎么回事?
我在React组件里用useEffect往localStorage存了个用户ID,但打开DevTools的Application面板看,Local Storage里还是空的,明明代码执行了也没报错,这是为啥?
我试过手动刷新页面、重启DevTools,甚至换浏览器都不行。代码逻辑看起来没问题啊:
useEffect(() => {
const userId = 'user123';
localStorage.setItem('userId', userId);
console.log(localStorage.getItem('userId')); // 控制台能打印出 user123
}, []);
控制台都能正常读到值,但Application面板就是不显示,是不是我哪里漏看了?
DevTools 的 Application 面板里的 Local Storage 列表有时候不会实时刷新,特别是你刚在代码里 setItem 后,它可能还停留在旧状态。先试试这几个动作:
1. 在控制台手动执行
localStorage.getItem('userId'),确认值确实存在2. 然后在 Application 面板里,点击一下 Local Storage 左侧的域名节点(就是你站点那一行),强制刷新整个面板
3. 如果还不动,把 DevTools 从右侧/下方切到新窗口打开,再切回来——这招能强制重绘
要是切完还是空的,再加个断点调试看看:在
localStorage.setItem后面打个断点,等断住时,打开控制台手动查localStorage.length和Object.keys(localStorage),看键是不是真的写了进去。真要是代码执行了、控制台能读、DevTools 就是不显示,那大概率是 DevTools 自己抽风,重启浏览器或者换个无痕窗口试试——我有一次在 Chrome 125 版本遇到过这 bug,重开一次就好了。