javascript - 如何保持显示/隐藏侧边栏的设置

Question

我制作了一个侧边栏，它旨在始终显示，只有当单击它时才会隐藏。但是隐藏此内容后，如果我刷新页面，它会再次显示。所以我想保留设置，这样如果用户隐藏它，它就不会出现，直到他按下显示按钮，无论页面刷新还是转到另一个页面都无关紧要。

(例如，Facebook 右侧聊天栏保持隐藏或显示，与页面刷新或其他任何操作无关)

我想对 JS 进行一些更改可以完成这项工作，但我不确定并且不是编码员，所以请帮助我做到这一点。

我使用的JS代码:

<script language=javascript type='text/javascript'>
function hideDiv() {
    if (document.getElementById) { // DOM3 = IE5, NS6
        document.getElementById('hideShow').style.visibility = 'hidden';
    } else {
        if (document.layers) { // Netscape 4
            document.hideShow.visibility = 'hidden';
        } else { // IE 4
            document.all.hideShow.style.visibility = 'hidden';
        }
    }
}

function showDiv() {
    if (document.getElementById) { // DOM3 = IE5, NS6
        document.getElementById('hideShow').style.visibility = 'visible';
    } else {
        if (document.layers) { // Netscape 4
            document.hideShow.visibility = 'visible';
        } else { // IE 4
            document.all.hideShow.style.visibility = 'visible';
        }
    }
}
</script>

HTML 和 CSS

<div id="hideShow" ..etc>
    My content
</div>

调用 JavaScript 来隐藏它:

<a href="javascript:hideDiv()">Hide Div</a>

这是为了展示它:

<a href="javascript:showDiv()">show Div</a> 

Answer 1

类似这样的事情!这里有一个读取cookie的函数，因为设置cookie很容易，但读取的次数不多。

readCookie = function (name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return "es";
    }

function hideDiv() {
  if (document.getElementById) { // DOM3 = IE5, NS6
    document.getElementById('hideShow').style.visibility = 'hidden';
  }
  else {
   if (document.layers) { // Netscape 4
     document.hideShow.visibility = 'hidden';
   }
   else { // IE 4
    document.all.hideShow.style.visibility = 'hidden';
   }
  }
 document.cookie = 'show=false';
}

function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
document.cookie = 'show=true';
}

if(readCookie('show') == "true"){
 showDiv();
}
else {
 hideDiv();
}

祝你好运