Why does the same code for getting cookie not work twice

Question

I am adding cookies to save if you've closed certain elements of the page. The cookies work for when I close the cookieconsent banner, but when I use the exact same code to get other cookies, it doesn't work. Here's the javascript:

function GetCookie(name) {
    var arg=name+"=";
    var alen=arg.length;
    var clen=document.cookie.length;
    var i=0;
    while (i<clen) {
      var j=i+alen;
      if (document.cookie.substring(i,j)==arg)
        return "here";
      i=document.cookie.indexOf(" ",i)+1;
      if (i==0) break;
    }
    return null;
  }
  function testFirstCookie(){
      var offset = new Date().getTimezoneOffset();
      if ((offset >= -180) && (offset <= 240)) { //Europe and America
          var visit=GetCookie("cookieCompliancyAccepted");
          if (visit==null){
             $("#myCookieConsent").fadeIn(800); // Show warning
         } else {
              // Already accepted
         }      
      }
      var offset = new Date().getTimezoneOffset();
      if ((offset >= -180) && (offset <= 240)) { //Europe and America
          var visit=GetCookie("saveBannerClosed");
          console.log(visit);
          if (visit==null){
              console.log("show");
             $("#savebanner").show();   // Show banner
         } else {
             console.log("hide");
              $("#savebanner").hide(); //hidden
         }      
      }
  }
  $(document).ready(function(){
      $("#cookieButton").click(function(){
          console.log('Understood');
          var expire=new Date();
          expire=new Date(expire.getTime()+7776000000);
          document.cookie="cookieCompliancyAccepted=here; expires="+expire+";path=/";
          $("#myCookieConsent").hide(800);
      });
      $("#denySaveBanner").click(function(){
          console.log('Save Banner Closed');
          var expire=new Date();
          expire=new Date(expire.getTime()+604800000);
          document.cookie="saveBannerClosed=here; expires="+expire+";path=/";
          $("#savebanner").hide();
      });
      testFirstCookie();
  });

Here's the html:

<center>
    <div id="savebanner" style="border:5px solid red; width:60%;">
        <img
            src="image/savebanner.jpg"
            onclick='window.open("https://www.battleforthenet.com")'
            width="100%"
        />
        <br />
        <button
            style="background-color:red; color:white"
            id="denySaveBanner"
        >
            No thanks, I want to pay more for a worse internet
        </button>
        <button
            style="background-color:green; color:white"
            onclick="window.open('https://battleforthenet.com');"
        >
            Show me how I can help
        </button>
    </div>
</center>

It hides when you press the button, but it doesn't re-hide when you reload the page. I'm about to give up on this because I've been trying for about a month now to figure this out. Thanks.

Answer 1

Can you tidy up your getCookie method a bit? And be explicit about true/false returns rather than looking for null ? Hopefully this will make it easier to track down.

    cookies = document.cookie.split("; ")
      for (c of cookies) {
        const kvPair = c.split("=")
        if (kvPair[0] === name) {
            return true
        }
      }

     return false

Answer 2

It works on my side; the div stays hidden after refresh.

It may be that the cookie isn't set because you are using file:/// or localhost.

Use http://127.0.0.1/ if debugging locally.