JavaScript:本地存储 "boolean"未打开第一个函数调用

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。但是，本地存储不会更新。

此时如果用户切换页面，叠加层会显示在每个页面上(当您希望它不显示时 - 毕竟您已经将其关闭)。

这就是有趣的地方，如果您按两次覆盖按钮，覆盖会切换两次(关闭和重新打开，反之亦然)- 但本地存储只会切换一次。现在叠加 bool 值是倒退的!从这一点开始，每次按下按钮，打开和关闭叠加层都会切换一次本地存储。

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

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 应该自动将 bool 值转换为字符串。)