[JavaScript] 오늘 하루 보지 않기 (cookie)

JavaScript를 사용하여 '오늘 하루 보지 않기 팝업' 구현하기

• '오늘 하루 보지 않기' 체크박스 선택 후 닫음 > 오늘 하루 보지 않기
• '오늘 하루 보지 않기' 체크박스 해제 후 닫음 > 페이지 접속 시 마다 계속 보이기

 

const btnClose = document.querySelector('.btn_close');
const popupMask = document.querySelector('.popup_mask');
const popup = document.querySelector('.popup_wrap');

btnClose.addEventListener('click', function(){
  // Not interested 체크시
  if(document.querySelector('#todayPop').checked){
    setCookie("popup_today", "done", 1)
  };
  popupMask.classList.add('hide');
  popup.classList.add('hide');
});

function setCookie( name, value, expiredays ){
  var todayDate = new Date();
  todayDate.setDate( todayDate.getDate() + expiredays );
  document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}

function checkCookie(){
  // cookie 있을 때
  if(getCookie("popup_today") == "done"){
    popupMask.classList.add('hide');
    popup.classList.add('hide');
  }else{
  // cookie 없을 때
    popupMask.classList.remove('hide');
    popup.classList.remove('hide');
  }
}