JavaScript：本地存储；布尔值；不打开第一个函数调用

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

<!-- 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>

好的，这是我的问题，为什么本地存储在第一次按下按钮时不切换？ 让我知道，如果我可以清除任何东西，或者如果你需要更多的支持代码

 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

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

如果覆盖被隐藏，则将存储器中的

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

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

旁白：

classList.toggle

返回一个方便的布尔值，因此无需进行两次dom钻取。您也应该更好地订阅onload事件。那么，您是否希望在LocalHistory的上一个状态中始终与当前状态相反？一个“false”的字符串实际上是真实的，因为它不是空字符串，

false

是一个布尔值，而不是Web存储API处理的唯一类型的字符串。旁白：

classList.toggle

返回一个方便的布尔值，因此无需进行两次dom钻取。您也应该更好地订阅onload事件。那么，您是否希望在LocalHistory的上一个状态中始终与当前状态相反？一个“false”的字符串实际上是真实的，因为它不是空字符串，

false

是一个布尔值，而不是Web存储API处理的唯一类型的字符串。使用覆盖层的实际状态作为布尔值来存储是有意义的，我不知道为什么我一开始没有这样做。我想我还是不明白为什么它以前不起作用，但这个答案确实解决了问题——所以我给你绿色支票。非常感谢。使用覆盖的实际状态作为布尔值来存储是有意义的，我不知道为什么我没有首先这样做。我想我还是不明白为什么它以前不起作用，但这个答案确实解决了问题——所以我给你绿色支票。非常感谢。