[ HTML / JS ]쿠키를 이용한 24시간 팝업창 만들기

홈페이지 클릭시 광고를 하기 위해 뜨는 팝업창을 하나 만들어 봤다.

나는 공지글에 옵션을 주어 팝업창을 띄우도록 해서 공지사항으로 표시 되고 있는것이니

팝업의 내용은 무시하고..ㅎㅎ 코드 분석을 해보쟈!😘

당연히도 팝업창의 내용을 (뼈대를) 만들었다고 가정하에 핵심 코드만 살펴보겠다 :)

처음 메인 화면에서 팝업창을 띄우는 코드이다. ( 자바스크립트 )

// popup //

var noticeCookie = getCookie("name");  // 쿠기 가져오기

if (noticeCookie != "value"){                

    // 팝업창 띄우기

    window.open('/web/main/popup.php', 'width=500, height=650, status=no, scrollbars= 0, toolbar=0, menubar=no');

}   

Colored by Color Scripter

cs

쿠키를 가져와 쿠키에 저장된 정보를 분석한 뒤 window.open()으로 팝업창을 띄워주었다.

window.open의 매개변수로 들어간 부분은 이름들이 직관적이니 따로 설명하지 않겠다.

위의 코드를 간략히 보여주기위해 생략했는데 만약 팝업창을 여러개 띄워주고 싶다면 

window.open("경로", "아이디", "옵션"); 팝업창에 아이디를 주어 구별 해주면 된다.

이어서 쿠키를 설정하고 가져오는 부분을 설명하겠다.

function setCookie(name, value) 
{ 
    var todayDate = new Date();
    todayDate.setHours( 24 );
    document.cookie = name+ "=" + escape( value ) + "; path=/; expires=" +   todayDate.toGMTString() + ";";
} 
 
function closeWin() 
{ 
    if ($("#option").is(":checked") ) 
    {
        setCookie("name", "value"); 
        window.close();
    }
}

위는 팝업창에서 '하루동안 띄우지 않기' 버튼을 눌렀을 때 발생하는 이벤트이다.

나는 이때 쿠키를 설정해 주었다.

혹시 쿠키에 대해 모르시는 분들을 위해 간략히 설명하자면 쿠키란 사용자( 웹 사이트 방문자 )의 컴퓨터에 저장해놓는 정보이다.

setCookie를 호출 했을 때 아래와 같이 쿠키가 생성될 것이다.

쿠키이름 (name) = 쿠키값 (vlaue);

경로 (path) = "/";

만료일 (expires) = "";

이게 끝이다! 쿠키는 잘 만들어졌다.🍪🍪🍪 

그럼 만들어준 쿠키를 가져오자.

팝업창을 띄울때 쿠키를 가져오는 함수를 사용했었다. ( getCookie(name) )

아래가 그 함수이다 :)

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 ""
} 

쿠키명을 매개변수로 받아 해당 데이터를 짤라서 가져오도록 되어 있다.

이를 호출하여 쿠키의 값이 설정 되어있으면 팝업창을 띄우지 않도록 만들었다.