JavaScript localStorage的tried_or_not2首次返回yes来源问题咨询

问题原因分析 #

出现这个现象最核心的原因是表单提交触发了页面刷新，你看到的控制台输出实际是刷新后第二次页面加载的日志，完整执行流程如下：

1. 首次加载页面时，localStorage里没有tried_or_not2，取值为null
2. 进入if判断分支，依次执行console.log('test2')、localStorage.setItem('tried_or_not2', 'yes')、表单赋值操作，最后调用form_for_login.submit()触发表单提交，页面开始重载
3. 浏览器默认会在页面刷新时清空控制台日志，所以首次加载的test1 null、test2、test3、test4日志都被清除了
4. 页面重载完成后第二次执行JS代码，此时localStorage里已经存了tried_or_not2=yes，所以输出test1 yes，不进入if分支，直接输出test5，和你看到的日志完全吻合

验证方法 #

你可以按以下步骤操作复现完整流程：

• 打开浏览器开发者工具的「控制台」标签，勾选「保留日志（Preserve log）」选项，避免刷新时日志被清空
• 打开「应用（Application）」标签，找到当前站点的Local Storage条目，删除所有已存的记录
• 刷新页面重新测试，此时你会看到两次页面加载的完整日志，首次加载的日志也会被保留

你注释掉localStorage.setItem('tried_or_not2', 'yes')之后，首次进入if分支时不会写入存储，页面刷新后第二次读取tried_or_not2还是null，自然就不会出现读取到yes的情况，也刚好符合你的测试结果。

内容的提问来源于stack exchange，提问作者Rhys