Проверьте, существует ли файл cookie, и добавьте стиль в класс

Я пытаюсь заставить свой скрипт проверять, существует ли файл cookie. Если он существует, установите класс так, чтобы он не отображал ничего, а если он не существует, тогда отображайте блок.

После нажатия кнопки всплывающее окно исчезает, но после перезагрузки страницы снова отображается, несмотря на то, что куки все еще существуют.

У меня есть этот скрипт в моем нижнем колонтитуле.

<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>

Что я делаю не так?

getCookie ничего не возвращает, поэтому acceptCookie всегда не определено
litelite 16.05.2022 21:16
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
1
21
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что getCookie возвращает undefined, так как ничего не возвращает. Измените его на:

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

Также измените свое утверждение if на:

if (!acceptCookie) {
  document.querySelector(".gdprCookiePopup").style.display = "block";
} else {
  document.querySelector(".gdprCookiePopup").style.display = "none";
}

Потому что acceptCookie никогда не будет равно "null";

Другие вопросы по теме