JavaScript 使用 cookie 显示/隐藏框

JavaScript show/hide box using cookies

本文关键字：隐藏 显示 使用 cookie JavaScript      更新时间：2023-09-26

你好，我的JavaScript有一个小问题。

    $(document).ready(function() {
      var status = getCookie();
      if (status > 0) {
        setCookie(1);
        document.getElementById('cookiemenu_dropdown').style.display = "block";
      } else {
        setCookie(0);
        document.getElementById('cookiemenu_dropdown').style.display = "none";
      }
    });
     //-----------------------------------------------------
    function getCookie() {
        var cookies = document.cookie.split(';');
        var FirstCookie = cookies[0];
        var FirstValue = FirstCookie.split('=')[1];
        return FirstValue;
      }
      //-----------------------------------------------------
    function setCookie(value) {
        var expires = new Date();
        expires.setMonth(expires.getYear() + 1);
        document.cookie = 'divStav' + '=' + value + ';EXPIRES=' + expires.toGMTString();
      }
      //-----------------------------------------------------
    function ShowHideCookieBox() {
      var display = document.getElementById('cookiemenu_dropdown').style.display;
      if (display == "block") {
        document.getElementById('cookiemenu_dropdown').style.display = "none";
        setCookie(0);
      } else {
        document.getElementById('cookiemenu_dropdown').style.display = "block";
        setCookie(1);
      }
    }
<div id='cookiemenu'>
  <div class='cookiemenu_header' onclick='ShowHideCookieBox()'>
    <img src='./img/triangle.png' />Letní akce!
    <img src='./img/triangle.png' />
  </div>
  <div id="cookiemenu_dropdown" class='cookiemenu_content'>
    <span class='date'>Lorem</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis magna sed scelerisque hendrerit. Curabitur non quam bibendum, eleifend lorem et, bibendum turpis. Aliquam finibus velit ac lorem consectetur hendrerit. Integer viverra risus vitae
    sapien
  </div>
</div>

脚本应按如下方式工作：

当我第一次访问我的网页时，框是隐藏的（默认情况下）。当我点击标题时，会出现该框，并在 cookie 中设置值 1（我的网络上只有一个 cookie）。当我再次访问时，应该打开该框（从 cookie JavaScript 取值 1，当值为 1 时，设置display:block）。

有问题。单击和显示/隐藏工作正常。当我第一次访问页面时，该框被隐藏（这也没关系）。但是饼干不能保存。然后我让框打开并按 F5，页面重新加载后框被隐藏。

有人可以帮助我吗？

对我来说

很好用。你包括jQuery吗？如果你想以纯javascript的方式做到这一点，你可以改变你的ready函数，比如： 

window.onload = function() {
      var status = getCookie();
      if (status > 0) {
        setCookie(1);
        document.getElementById('cookiemenu_dropdown').style.display = "block";
      } else {
        setCookie(0);
        document.getElementById('cookiemenu_dropdown').style.display = "none";
      }
    };

您获得了年份并将其设置为月份，因此中断了到期日期：

expires.setMonth(expires.getYear() + 1);

尝试使用 setYear 而不是 setMonth 。

相关文章：