关于local storage在页面刷新时保持状态的疑问及CRT滤镜状态不生效的问题求助

各位大佬好，我刚入门JavaScript，最近在给我的网站加CRT滤镜的开关功能，本来想用LocalStorage来记住用户的选择状态，结果碰到个头疼的问题：

每当我关掉CRT滤镜后切换到网站的新页面，DevTools的Application面板里明明显示LocalStorage已经把状态存成关闭的了，但页面上的滤镜却直接回到了默认开启的状态（初始值是true），而且之后再点开关，Application面板里的状态也好像不跟着更新了？

之前我找别人帮忙搭了这个功能的基础代码，本来以为能正常工作，结果现在状态同步这块彻底卡壳了。想请教下有没有前辈遇到过类似的情况，或者能给我指几个可能的排查方向？

我目前的逻辑大概是这样的：

• 页面加载的时候从LocalStorage里读状态，然后设置滤镜的显示或隐藏
• 点击开关按钮时，切换当前的滤镜状态，再把新状态存到LocalStorage里

我自己瞎猜可能的问题点：

• 是不是页面初始化时读取LocalStorage的代码执行得太早了？比如DOM还没加载好就跑了，导致没读到或者没应用上？
• 页面跳转的时候，新页面的状态读取逻辑没触发？
• 存LocalStorage的时候是不是把布尔值存成字符串了？比如存了"false"，但判断的时候当成了布尔值true来处理？

内容来源于stack exchange