Javascript/CSS，如何保持更改

Javascript/CSS, How to keep changes?

本文关键字：何保持 CSS Javascript      更新时间：2023-09-26

>基本上，我有这个标题，当人们不再需要它时，它会滑开，当他们想要它时可以再次滑下来。我希望它默认关闭，但是我不希望人们每次加载新页面时都必须不断单击标题切换。我读过关于使用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。对这个非常新手的编码人员的任何帮助将不胜感激。

谢谢迪伦

编辑2：我稍微更改了提供给我的代码，遇到了一个新问题。

 <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 控制台中触发"函数顶部位置 （）"时，我都会收到以下错误：

语法错误：预期的表达式，脚本数据结束：，/* 使用 FIREBUG 命令行计算的表达式： */%0A%09function%20topposition（） 第 2 行

您可以使用

document.cookie="headerDown=true";

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

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

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

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

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

我会

说本地存储将是一个不错的选择。只需记录一个事件或变量或其他内容，然后在每次加载页面时检查它。

https://developer.mozilla.org/en-US/docs/Web/API/Window.localStorage

使用本地存储将允许您在页面加载之间保存变量。将 localStorage.setItem（name，value） 添加到您的 if 语句中，如下所示。如果您只使用 headerToggle 函数来定位这些元素，那么函数下方的 if 语句就足够了。它需要两次调用标头切换函数，即使您希望标头关闭。

您需要确保 if 语句放在div 的 html 之后，最好放在页面的最底部。

function headertoggle() {
  var top;
  var pagetop;
  if (document.getElementById("page-header").style.top === "-210px") {
    localStorage.setItem("headerDown", true);
    top = "-11px";
    pagetop = "275px";
  } else {
    localStorage.setItem("headerDown", false);
    top = "-210px";
    pagetop = "80px";
  }
  document.getElementById("page-header").style.top = top;
  document.getElementById("page-body").style.top = pagetop;
}
if (localStorage.getItem("headerDown") == "true") {
  headertoggle();
}
headertoggle();

相关文章：