在页面重新加载中保留 div 隐藏/显示

Question

我有一个隐藏和显示 html div 的按钮

<button id="hideshow" title="Click to Show/Hide Assessment"></button>

这是脚本

$(document).ready(function(){ /// hide and show button
    $('#hideshow').click(function() {
        $('#containerDiv1').toggle("slideLeft");
        $("i", this).toggleClass("fas fa-lg fa-chevron-up fas fa-lg fa-chevron-down");
    });
});

现在我要实现的是当用户选择隐藏div并单击按钮时，当他重新加载页面时它应该仍然隐藏。因为默认情况下，当我的网页打开时，我的 div 就会显示出来。

有什么帮助吗？？

Answer 1

使用sessionStorage、localStorage 或cookie 来保持状态，然后在页面加载时检索并恢复它。这确实需要一些工作，但 UI 的闪烁是免费的 ;)

这说明了原理：

$(document).ready(function(){ /// hide and show button
    const containerState = localStorage.getItem('containerDiv1');
    switch (containerState) {
      case 'visible':
        // your code for when the user last saw it "visible"
        break;
      case 'hidden':
        // your code for when the user last saw it "hidden"
        break;
      default:
        // any action that should take place when containerState is empty (not set, never clicked)
    }
    $('#hideshow').click(function() {
        $('#containerDiv1').toggle("slideLeft");
        $("i", this).toggleClass("fas fa-lg fa-chevron-up fas fa-lg fa-chevron-down");
        // on every click, store the current visibility state in localStorage
        localStorage.setItem('containerDiv1', $('#containerDiv1:visible').length ? 'visible' : 'hidden');
    });
});

Answer 2

按照 connexo 的回答，

$('#containerDiv1").css('display')=== 'none' ? 'hidden' : ' visible'

应该工作