본문 바로가기
카테고리 없음

자바스크립트를 이용한 쿠키 팝업창 제한하기

정숙씨의 쏠쏠한 코딩 2021. 8. 19. 23:14
  • 자바스크립트를 이용한 팝업창 제한 기능
    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>쿠키 팝업 제어</title>
          <script type="text/javascript">
              //브라우저 로드시 pageLoad function 호출
              window.onload = pageLoad;
              function pageLoad(){
                  //notShowPop의 쿠키 값을 getCookieValue() 함수 호출하여 쿠키 값을 받아옴
                  notShowPop = getCookieValue();
                  //쿠키의 값이 true가 아닐경우 팝업창 출력
                  if(notShowPop != "true")
                  {
                      window.open("popUp.html","pop","width=400, height=500, history = no, resizeable = no, status = no, scrollbars = yes, menubar = no ");
                  }

              }
              function getCookieValue(){
                  var result = "false";

                  if(document.cookie != "")
                  {
                      //document를 이용한 cookie 속성으로 세미콜론 기준으로 문자열 분리
                      cookie = document.cookie.split(";");
                      console.log(cookie);
                      for(var i = 0; i<cookie.length; i++)
                      {
                          element = cookie[i].split("=");
                          value = element[0];
                          //정규표현식으로 문자열의 공백 제거
                          value = value.replace(/^\s*/,'');
                          //쿠키의 이름이 notShowPop일경우 쿠키의 값을 가져와 반환
                          if(value == "notShowPop")
                          {
                              result = element[1];
                          }
                      }
                  }
                  return result;
              }
              //쿠키 삭제 버튼 클릭시 deleteCookes() 함수 호출
              function deleteCookie()
              {
                  document.cookie = "notShowPop = " + "false" + ";path=; expires=1";
              }
          </script>
      </head>
      <body>
          <form>
              <input type="button" value="쿠키 삭제" onclick="deleteCookie()">
          </form>
      </body>
      </html>
  • popUp.html
    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <script>
              
              function setPopUpStart(obj)
              {
                  if(obj.checked == true)
                  {
                      var expireDate = new Date();
                      //쿠키 유효시간 설정 로직 하루로 지정됨
                      var days = 1;
                      expireDate.setDate(expireDate.getDate() + days);
                      //오늘 더이상 팝업창 띄우지 않기에 체크시 notShowPop 값을 true로 변경하여 재접속시 팝업창을 띄우지 않음
                      document.cookie = "notShowPop=" + "true" + ";path=/; expires = " + expireDate.toGMTString();
                      window.close();
                  }
              }
          </script>
      </head>
      <body>
          알림 팝업창입니다.

          <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

          <form>
              <input type="checkbox" onclick="setPopUpStart(this)"> 오늘 더이상 팝업 띄우지 않기.
          </form>

      </body>
      </html>

티스토리툴바