Я работаю над проектом, который требует наложения учебника, я хочу, чтобы наложение переключалось с помощью кнопки, и я хочу вспомнить, в каком состоянии кнопка последней в промежутке между страницами изменяется, чтобы пользователю не приходилось " скрыть ", чтобы накладывать каждый раз, когда они переключают страницы. Вот мой код:
<!-- 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>
Вот что происходит, когда программа сначала загружается, в Local Storage нет «overlayVisibilityState», поэтому функции onload удаляют скрытый атрибут, так что наложение отображается и соответственно устанавливает Local Storage.
В этот момент, если пользователь переключает страницы, наложение отображается на каждой странице (как и ожидалось).
Теперь вот где это становится интересным: если пользователь нажимает кнопку наложения, наложение переключается - атрибут «скрытый» передается в div. Однако локальное хранилище не обновляется.
В этот момент, если пользователь переключает страницы, наложение отображается на каждой странице (когда вы ожидаете, что оно не будет отображаться - вы уже отключили его).
Вот где это весело, если вы дважды нажмете кнопку оверлея, оверлей будет дважды переключаться (выключаться и снова включаться или наоборот) - но Local Storage переключается только один раз. Теперь оверлей Boolean задом наперед! С этого момента, включение и выключение оверлея несколько раз переключает локальное хранилище один раз на нажатие кнопки.
Я знаю, что многое еще предстоит сделать, поэтому я попытаюсь объяснить снова, используя условный псевдокод.
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
Хорошо, вот мой вопрос, почему локальное хранилище не переключается при первом нажатии кнопки?
Дайте мне знать, могу ли я что-нибудь прояснить или вам нужен дополнительный код поддержки.