Estoy tratando de hacer que mi script verifique si existe una cookie. Si existe, configure la clase para que no muestre ninguno, y cuando no exista, muestre el bloque.
Después de presionar el botón, la ventana emergente desaparece, pero después de recargar la página, se muestra nuevamente, a pesar de que la cookie aún existe.
Tengo este script en mi pie de página.
<script> setCookie = (cName, cValue, expDays) => { var date = new Date(); date.setTime(date.getTime() + (expDays * 24 * 60 * 60 * 1000)); var expires = "expires="+ date.toUTCString(); document.cookie = cName + "=" + cValue + ";" + expires + "; path=/"; } getCookie = (cName) => { const name = cName + "="; const cDecoded = decodeURIComponent(document.cookie); const cArr = cDecoded .split("; "); var value; cArr.forEach(val => { if (val.indexOf(name) === 0) value = val.substring(name.length); }) } document.querySelector("#gdprCookiePopupAccept").addEventListener("click", () => { document.querySelector(".gdprCookiePopup").style.display = "none"; setCookie("gdprAccept", true, 90) }) var acceptCookie = getCookie("gdprAccept"); if(acceptCookie !== 'null') { document.querySelector(".gdprCookiePopup").style.display = "block"; } else { document.querySelector(".gdprCookiePopup").style.display = "none"; }; </script>¿Qué estoy haciendo mal?
El problema es que getCookie devuelve undefined , ya que no devuelve nada. cambiarlo a:
getCookie = (cName) => { const name = cName + "="; const cDecoded = decodeURIComponent(document.cookie); const cArr = cDecoded.split("; "); var value; cArr.forEach((val) => { if (val.indexOf(name) === 0) value = val.substring(name.length); }); return value; }; También cambie su declaración if a:
if (!acceptCookie) { document.querySelector(".gdprCookiePopup").style.display = "block"; } else { document.querySelector(".gdprCookiePopup").style.display = "none"; } Porque acceptCookie nunca será igual a "null" ;