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

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();
}

祝你好运

Answer 2

您需要一个 javascript 类来读取和写入 cookie。这样，当用户与侧边栏交互时，您可以将侧边栏的状态写入 cookie。当页面加载时，您从 cookie 中读取状态，并相应地设置可见性。

Answer 3

您需要将栏的可见性状态保存在某个变量中。由于您仅使用（我假设）JS，因此您可能需要访问用户的cookie。

如何在JS中设置Cookie： http://www.javascripter.net/faq/settinga.htm
如何在JS中读取Cookie： http://www.javascripter.net/faq/readinga.htm