Javascript/CSS，如何保持变化？

Question

基本上我有这个标题，当人们不再需要它时，它会滑出，当他们需要时可以再次滑下来。我希望它默认关闭，但我不希望人们每次加载新页面时都必须不断单击标题切换。我读过有关使用 cookie 的信息，但我在 javascript 方面的技能相当有限。这是我目前使用的运行良好的代码:

<div id="headtoggle" onclick="headertoggle()"></div>
<script>
        function headertoggle() {
            var top;
            var pagetop;
            if (document.getElementById("page-header").style.top === "-210px") {
                top = "-11px";
                pagetop = "275px";
            } else {
                top = "-210px";
                pagetop = "80px";
            }
            document.getElementById("page-header").style.top = top;
            document.getElementById("page-body").style.top = pagetop;
        }
</script>

如何更改代码以使其“记住”每个人的最后设置是什么？我也愿意使用 jquery。对于这个非常新手的编码员的任何帮助将不胜感激。

谢谢，迪伦

---

EDIT2:我稍微更改了给我的代码，但遇到了新问题。

 <div id="headtoggle" onclick="headertoggle()" onload="topposition()"></div>
<script>
    function topposition() {
        var top;
        var pagetop;
        if (localStorage.getItem("headerDown") == "false") {
            top = "-11px";
            pagetop = "275px";
        } else {
            top = "-210px";
            pagetop = "80px";
        }
        document.getElementById("page-header").style.top = top;
        document.getElementById("page-body").style.top = pagetop;
    }
</script>
<script>
    function headertoggle() {
        var top;
        var pagetop;
        if (document.getElementById("page-header").style.top === "-210px") {
            localStorage.setItem("headerDown", false);
            top = "-11px";
            pagetop = "275px";
        } else {
            localStorage.setItem("headerDown", true);
            top = "-210px";
            pagetop = "80px";
        }
        document.getElementById("page-header").style.top = top;
        document.getElementById("page-body").style.top = pagetop;
    }
</script>

开关按预期工作，但是每当我在 firefox 控制台中触发“function topposition ()”时，我都会收到以下错误:

SyntaxError: expected expression, got end of script data:,/* EXPRESSION EVALUATED USING THE FIREBUG COMMAND LINE: */%0A%09function%20topposition() Line 2

Answer 1

您可以使用以下方式创建 cookie

document.cookie="headerDown=true";

然后，当 header 向上移动时，用更改为 false 的相同代码覆盖 cookie。

如果您随后添加一些在页面加载时读取 cookie 的代码，您将能够确定需要什么。

您可以通过访问 document.cookie 来读取 cookie，它将是以下格式的任何可用 cookie 的字符串。

cookie1=value; cookie2=value; cookie3=value;

查找您的 cookie，您应该能够从那里设置标题是向上还是向下。