개발자 여러분 방가워요

팝업창 하루만 띄우기 어렵지 않아요. 10분만 투자하시면 금방 하실수 있어요.

다들 알고 있지만 왜 그런지 쏙쏙 들이 분석해 보아요~~~

cookie의 기본원리

Set-Cookie 구조 :

name=Value;expires=DAT;path=PATH domain=DOMAIN_NAME;secure

 

name=Value - 쿠키의 이름으로서 반드시 지정해야 한다. 이름에 세미콜론(;), 쉼표(,), 빈칸이 들어가면 안됨

expires=DATE - 쿠키가 종료되는 날짜를 지정한다. 만약 잘짜가 생략되면 현재 넷스케이프 세션 동안에만 유효하게 된다.
                       날짜 형식 : Wdy, DD-Mon-YY HH:MM:SS GMT

                      * Wdy : a string representing the full name of the day of the week
                      * DD : an integer representing the day of the month
                      * Mon : a string representing the three-character abbreviation of the month
                      * YY : an interger representing the last two digits of the year
                      * HH, MM, SS : 2-digit representations of hours, minutes, ank seconds respectively.

path=PATH - 쿠키가 유효하게 사용될 수 있는 url 주소의 디렉토리 부분을 지정한다. 만약 지정되지 않는다면 쿠키를 설정한 문서 위치가 사용된다.

domain=DOMAIN_NAME - 쿠키가 유효하게 사용될 수 있는 url 주소의 도메인 부분을 지정하나. DOMAIN_NAME은 적어도 두개의 점으로 연결된 세개의

                                     단어로 이루어져야 하다.(예: NET-IN.CO.KR) 만약 지정되지 않는다면 쿠키를 설정한 문서 위치의 도매인이 사용된다.

secure - 데이터 전송에 보안이 요구되는지를 지정한다.(예:ssl프로토콜을 사용하는 HTTP인 HTTPS) 만약 필요하면 SECURE라는 키워드를 쓰면 된다.




소스 기본원리

1. 하루만 보기를 클릭 -> 클릭시 쿠키에 현재 경로다시시작할 시간을 담는다.
2. 해당페이지에 왔을때 현재 시간과 쿠키시간을 비교 하여 시작시간이 되지 않았으면 띄우지 않는다.

소스 1. ( 클릭시 쿠키에 값 저장 )

1 .function setCookie( name, value) {
2.            var todayDate = new Date();
3.            todayDate.setHours( 24 );
4.            document.cookie = name + "=" + escape( value ) + "; path=/; expires=" +   todayDate.toGMTString() + ";";
}


소스 1. 분석

클릭시 쿠키에 값을 저장하는 함수입니다.


첫줄    : name:쿠키명 , value:쿠키값
둘째줄 :  var todayDate = new Date();  - 현재의 년월일 시분초를 가져옵니다.
세째줄 :  쿠키저장시간 셋팅
네째줄
:  쿠키값을 만들어 준다.
              name=쿠키명,
              value=쿠키값,
              path=경로,
              expires=쿠키가 종료되는 날짜


직접 돌리면서 알아볼수 있게 간단한 예제 한번 구현해 봤습니다.
한번 직접 브라우져에서 돌아가는걸 보면서 소스 분석을 해보시면 더 이뻐 ~~~ 어렵지 않아요 .
치기 힘들면 가져가서 테스트 해도 되요. ㅋㅋㅋ 그럼 즐프(즐거운 프로그램) 되세요 .


<예제>
<html>
 <head>
    <script language="javascript">
    // === 쿠키값 가져오기 ===
    function getCookie(name) {
      var Found = false
      var start, end
      var i = 0
    
      while(i <= document.cookie.length) {
        start = i
        end = start + name.length
    
        if(document.cookie.substring(start, end) == name) {
          Found = true
          break
        }
        i++
      }
    
      if(Found == true) {
        start = end + 1
        end = document.cookie.indexOf(";", start)
          if(end < start)
            end = document.cookie.length
        return document.cookie.substring(start, end)
      }
      return ""
    }

    // === 팝업띄우기 가져오기 ===
    function openPopup()
    {
        var noticeCookie=getCookie("popup");  // 쿠키변수 이름
        if (noticeCookie != "no"){
            window.open('http://naver.com','pop1','width=350,height=400,top=50,left=150');
        }else{
            alert('아직 쿠키가 걸려있습니다.')
        }
        // window.open('팝업창 웹페이지','윈도우명','width=350,height=400,top=50,left=150');
    }

    // === 쿠키값 저장하기===
    function setCookie(name, value) {
        var todayDate = new Date();
        todayDate.setHours( 24 );
        document.cookie = name + "=" + escape( value ) + "; path=/; expires=" +   todayDate.toGMTString() + ";";
    }

    </script>
 </head>

 <body>
  <a href="javascript:openPopup()">팝업 띄우기</a>
  <a href="javascript:setCookie('popup', 'no')">24시간동안 안띄우기</a>
 </body>
</html>

설정

트랙백

댓글