쿠키팝업

홍요한·2021년 4월 14일

javasciprt jquery 접근성 쿠키 퍼블리싱

기능

목록 보기

2/2

작동순서

1. 웹페이지 접속 후 cookie에 popup데이터가 있는지 확인 한다.

2. 데이터유무에 따라 팝업이 보일지 말지 결정한다.

// 윈도우 로드 후 쿠키 확인
$('.cookiePopup').each(function(index, item){
  var obj = $(item)
  var popupName = $(item).attr('id');
  checkCookie(popupName, obj) 
})

//쿠키 확인
function checkCookie(name, obj){
  var cookies = document.cookie.split(';'); // 쿠키구분
  var visited = false;

  for(var i in cookies){
    if(cookies[i].indexOf(name) > -1){
      visited = true;
    }
  }
  if(visited){
    //재방문
    obj.css('display','none');
  } else{
    //신규방문
    obj.css('display','block');
  }
}

3. 하루동안 안보이기를 체크했을 경우와 그냥 닫기버튼을 클릭했을 경우를 구분짓는다.

4. 하루동안 안보이기를 체크하고 닫을 경우 쿠키에 팝업데이터를 생성한다.

5. 그냥 닫기 버튼을 클릭할 경우 쿠키에 팝업데이터를 삭제한다.

var popBtn = $('.btn_close');

// 쿠키팝업 버튼 클릭시 할 일
popBtn.on('click', function(){
  var currentPopup = $(this).closest('.cookiePopup');
  var name = currentPopup.attr('id');
  var checkbox = $(this).siblings('.ck_lb').find('input');
  var checkTrue = $(checkbox).prop("checked");
  if(checkTrue){ // checkbox 클릭 후 닫기버튼을 눌렀을 때
    setCookie(name, 'Main', 1);
    currentPopup.css('display', 'none');
  } else{ // 그냥 닫기버튼을 눌렀을 때
    delCookie(name);
    currentPopup.css('display', 'none');
  }
})

// 쿠키팝업 생성
function setCookie(name, value, day){
  var date = new Date();
  date.setDate(date.getDate() + day);

  var mycookie = '';
  mycookie += name + '=' + value + ';';
  mycookie += 'Expires=' + date.toUTCString();

  document.cookie = mycookie;
}

// 쿠키 삭제
function delCookie( name ){
  var date = new Date();
  date.setDate(date.getDate() - 1); // 쿠키삭제시 이전날짜로 지정하면 삭제된다. 

  var setCookie = '';
  setCookie += name +'=Main;'; // 어플리케이션에 들어가는 값은 세미콜론으로 구분해주어야함.
  setCookie += 'Expires =' + date.toUTCString(); // 쿠키에서는 date가 UTC포멧으로 나와야함.

  document.cookie = setCookie; // 쿠키 설정, 생성
}