Как сделать так чтобы окно предупреждение о cookie после соглашения больше не показывалось?

Question

[Flipsizze]

Проект также добавил на CodePen: (может кому там удобнее)
https://codepen.io/ivashnev-nikita/pen/ZEqPamx

<div class="fixed-cookie">
  <div id="cookiePopup" class="hide">
    <img src="https://cdn-icons-png.flaticon.com/512/164/164659.png" />
    <p>
      Наш сайт использует файлы cookie для обеспечения удобства просмотра и
      соответствующую информацию. Прежде чем продолжить использование нашего сайта, вы соглашаетесь и
      принимаете наш <a href="/privacy/">Политика использования файлов cookie и конфиденциальность.</a>
    </p>
    <button id="acceptCookie">Согласиться</button>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

.fixed-cookie {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
}

#cookiePopup {
  z-index: 15;
  background-color: #ffffff;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  font-size: 14px;
  width: 70vw;
  max-width: 42.85em;
  box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
  font-family: Montserrat;
  text-align: justify;
  line-height: 1.8em;
  padding: 2em 1.4em;
  border-radius: 6px;
  transition: all 0.5s ease-in;
  z-index: 20;
}
#cookiePopup img {
  display: block;
  width: 3.75em;
  transform: translateZ(0);
  position: relative;
  margin: auto;
}
#cookiePopup p {
  text-align: center;
  margin: 1.4em 0;
}
#cookiePopup button {
  background-color: #308b82;
  border: none;
  color: #ffffff;
  font-size: 1.2em;
  padding: 1em 1.4em;
  display: block;
  position: relative;
  margin: auto;
  border-radius: 5px;
}
#cookiePopup a {
  color: #308b82;
}
.hide {
  visibility: hidden;
  bottom: 0;
  right: 2em;
}
.show {
  visibility: visible;
  bottom: 2em;
  right: 2em;
}
@media only screen and (max-width: 37.5em) {
  #cookiePopup {
    width: 100%;
  }
  .hide {
    bottom: 2em;
    right: 0;
  }
  .show {
    right: 0;
    bottom: 0;
  }
}

let popUp = document.getElementById("cookiePopup");
// Когда пользователь нажимает кнопку "Согласиться"
document.getElementById("acceptCookie").addEventListener("click", () => {
  // Создать объект даты
  let d = new Date();
  // Увеличьте текущее время на 1 минуту (срок действия cookie истечет через 1 минуту)
  d.setMinutes(2 + d.getMinutes());
  // Создать файл cookie с именем = myCookieName, значением = thisIsMyCookie и временем истечения срока действия = 1 минута
  document.cookie = "myCookieName=thisIsMyCookie; expires = " + d + ";";
  // Скрыть всплывающее окно
  popUp.classList.add("hide");
  popUp.classList.remove("show");
});

// Проверьте, присутствует ли уже файл cookie
const checkCookie = () => {
  // Прочитайте файл cookie и разделите на "="
  let input = document.cookie.split("=");
  // Проверьте наличие нашего файла cookie
  if (input[0] == "thisIsMyCookie") {
    // Скрыть всплывающее окно
    popUp.classList.add("hide");
    popUp.classList.remove("show");
  } else {
    // Показать всплывающее окно
    popUp.classList.add("show");
    popUp.classList.remove("hide");
  }
};

// Проверьте, существует ли файл cookie при загрузке страницы
window.onload = () => {
  setTimeout(() => {
    checkCookie();
  }, 2000);
};

Comments

[szQocks]

в localStorage заметку какую-нибудь сделай и всё, и при входе на сайт - проверяешь есть ли она там, если её нет - спрашиваешь пользователя о куках и заносишь заметку туда при условии если он согласился

[Danny Arty]

Так у вас кука через 1 минуту истекает, поэтому и появляется постоянно окно. При этом какой-то странный способ получения значения куки. А если там будут другие, вы уверены, что ваша кука myCookieName будет первой?

Answer 1

[Сергей delphinpro]

window.onload = () => {

  const popUp = document.getElementById('cookiePopup');

  function showPopup() {
    popUp.classList.add('show');
    popUp.classList.remove('hide');
  }

  function hidePopup() {
    popUp.classList.add('hide');
    popUp.classList.remove('show');
  }

  document.getElementById('acceptCookie').addEventListener('click', () => {
    localStorage.setItem('cookieAccepted', '1');
    hidePopup();
  });

  if (localStorage.getItem('cookieAccepted') === '1') {
    hidePopup();
  } else {
    showPopup();
  }

};