JavaScript：本地存储“布尔”未打开第一个函数调用

Question

我正在做一个需要教程覆盖的项目，我想通过按钮切换覆盖，并且我想记住按钮在页面更改之间的最后状态，这样用户就不必“隐藏”以在他们每次切换页面时覆盖。这是我的代码：

<!-- The two functions that do all the switching -->
<script>
        // This function changes the class of the overlay div and switches the Local Storage "boolean"
        function toggleOverlayVisibility(){
            document.getElementById('overlay').classList.toggle('hidden');
            sessionStorage.setItem('overlayVisibilityState', String(document.getElementById('overlay').classList.contains("hidden")));
        };
        // this function runs when the user switches pages and makes sure that the overlay is appropriately hidden or not.
        onload = function() {
            if(sessionStorage.getItem('overlayVisibilityState') == "true"){
               document.getElementById('overlay').classList.remove("hidden");
            } else if(sessionStorage.getItem('overlayVisibilityState') == "false") {
               document.getElementById('overlay').classList.add("hidden");
            } else {
               sessionStorage.setItem('overlayVisibilityState', "true");
               document.getElementById('overlay').classList.remove("hidden");
            }
 </script>

 <!-- the button -->
 <a href="#" onclick="toggleOverlayVisibility();"><img src="/static/icons/overlay.jpg" class="info-overlay"></a>

 <!-- the overlay div being toggled -->
 <div id="overlay" class="hidden">
        <!-- the overlay is split up into 4 sections so that the arrows always point at the right things regardless of windows size -->
        <p style="background-color:white; position:absolute; top:0; left:0; width:100%; height:100%"></p>
        <img src="/static/overlays/main-upper-left.png" style="position:absolute; top:0;">
        <img src="/static/overlays/main-lower-left.png" style="position:absolute; bottom:50px; left:-30px;">
        <img src="/static/overlays/main-upper-right.png" style="position:absolute; top:0; right:0;">
 </div>

这是发生的情况，当程序第一次加载时，本地存储中没有“overlayVisibilityState”，因此 onload 函数删除了隐藏属性，以便显示覆盖并相应地设置本地存储。

此时如果用户切换页面，覆盖显示在每个页面上（如预期的那样）。

现在有趣的地方是，如果用户按下叠加按钮，叠加就会被切换——“隐藏”属性被赋予 div。但是，本地存储没有更新。

此时，如果用户切换页面，则覆盖显示在每个页面上（当您希望它不显示时 - 毕竟您已经将其关闭）。

这就是有趣的地方，如果您按两次叠加按钮，叠加会切换两次（关闭和重新打开，反之亦然） - 但本地存储仅切换一次。现在覆盖布尔值倒退了！从此时开始，每次按下按钮，多次打开和关闭叠加层都会切换一次本地存储。

我知道要遵循的内容很多，所以我将尝试使用伪代码条件再次解释。

if single toggle
     overlay switches = 1
     Local History switches = 0
if multiple toggles
     overlay switches = number of toggles
     Local History switches = number of toggles - 1

好吧，这是我的问题，为什么本地存储在第一次按下按钮时没有切换？ 让我知道我是否可以解决任何问题，或者您是否需要更多支持代码。

Answer 1

 sessionStorage.setItem('overlayVisibilityState',
   String(document.getElementById('overlay').classList.contains("hidden")));

如果覆盖隐藏，则将存储中的overlayVisibilityState 设置为“true”。

但是这个逻辑

if(sessionStorage.getItem('overlayVisibilityState') == "true"){
   document.getElementById('overlay').classList.remove("hidden");
} else if(sessionStorage.getItem('overlayVisibilityState') == "false") {
   document.getElementById('overlay').classList.add("hidden");
} else {
   sessionStorage.setItem('overlayVisibilityState', "true");
   document.getElementById('overlay').classList.remove("hidden");
}

将 "true" 视为未隐藏叠加层。

设置时尝试对存储的值进行补码：

sessionStorage.setItem('overlayVisibilityState',
 !document.getElementById('overlay').classList.contains("hidden"));

（setItem 应该自动将布尔值转换为字符串。）