I'm currently developing a project that involves implementing a tutorial overlay. My goal is to have the overlay toggle on and off using a button, while also ensuring that the state of the button is remembered between page transitions so that users don't have to hide the overlay every time they switch pages. Below is the code I am working with:
<!-- The two functions responsible for toggling the overlay -->
<script>
// This function changes the class of the overlay div and updates the Local Storage "boolean" value
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 ensures that the overlay is hidden or visible accordingly.
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 used to toggle the overlay -->
<a href="#" onclick="toggleOverlayVisibility();"><img src="/static/icons/overlay.jpg" class="info-overlay"></a>
<!-- the overlay div that gets toggled -->
<div id="overlay" class="hidden">
<!-- the overlay is divided into 4 sections for proper display -->
<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>
Initially, when the program loads, there is no "overlayVisibilityState" in Local Storage. Therefore, the onload function removes the hidden attribute to display the overlay and sets Local Storage accordingly.
Upon switching pages, the overlay will be displayed on each page as expected.
The intriguing part comes in when the user interacts with the overlay button. Toggling the button will hide or show the overlay by adding or removing the "hidden" attribute to the div. However, the Local Storage does not update along with it.
As a result, upon subsequent page switches, the overlay continues to display despite being manually turned off earlier.
If the user iterates pressing the overlay button multiple times, the overlay will cycle through toggles correctly but Local Storage only updates once. This causes the overlay Boolean to become out of sync!
To simplify things, consider this pseudocode conditional explanation:
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
My main concern is why doesn't Local Storage toggle along with the first button press? Feel free to reach out if you need further clarification or more code samples.