使用Cookie的JavaScript显示/隐藏框

Question

Hello I have a small problem here with my 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> 

Script should work like this:

When I visit my web page first time, box is hidden (by default). When I click on header, the box shows up and the value 1 is set in a cookie (there is just one cookie on my web). When I visit again, that box should be opened (from cookie JavaScript takes value 1 and when the value is 1, the display:block is set).

There is the problem. Clicking and showing/hiding works fine. The box is hidden when I visit page first time (this is OK too). But cookies aren't saving. Then I let box open and press F5, box is hidden after page reload.

Could someone help me with that?

Answer 1

Works fine for me. Did you include jQuery? If you want to do it pure javascript way you can change your ready function like:

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";
      }
    };

Answer 2

You got year and set it to month, so you broke expire date:

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

Try to use setYear instead of setMonth .