제이쿼리 쿠키(jQuery Cookie) 활용하여 오늘 하루 보지 않기 기능 구현하기

쿠키(cookie) 활용하여 오늘 하루 보지 않기 기능 구현하기

---

웹사이트 작업을 하다보면 항상 들어가는 기능이 있다. 바로 공지사항 등을 레이어팝업이나 페이지 최상단에 노출시키고 매번 노출시키면 사용자가 번거로울 수 있으니 하루동안은 해당 배너가 뜨지 않도록 해주는 "오늘 하루 보지 않기", "오늘 하루동안 안보기"로 불리우는 기능이다.

 

오늘 하루 보지 않기 기능 예시

오늘 하루 보지 않기 기능 예시

오늘 하루 보지 않기 기능이 들어간 사이트는 쉽게 찾아볼 수 있다. 이 기능을 구현하는 방법에는 여러가지가 있을 수 있을 것이라 생각된다. 이 글에서는 복잡하지 않고 정말 쉬운방법인 제이쿼리 쿠키(jQuery Cookie)를 가지고 기능을 구현해보려 한다. 사실 마땅한 기능명이 없으니 오늘 하루 보지 않기 기능이라고 하는거지 쿠키(cookie)를 가지고 여러가지 기능을 응용하여 만들 수 있어보인다. 

먼저 페이지에 샘플페이지를 만들어 아무 레이어 팝업이나 띄어보자.

<!-- HTML -->
<!-- page content --> 
<div class="contents">
    <h1 class="title">page title</h1>
    <p>
        lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    <!-- 이하 가독성을 위해 dummy text 삭제 -->
</div>

<!-- layer popup content -->
<div class="layerPopup">
    <div class="layerBox">
        <h1 class="title">레이어팝업 타이틀</h1>
        <div class="cont">
            <p>
                lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
        <a href="javascrfipt:;" class="btnClose">닫기</a>
        <a href="javascript:;" class="btnTodayHide">오늘 하루 보지 않기</a>
    </div>
</div>

/* CSS */
.contents {margin:0 auto; max-width:800px;}
.contents .title {margin:10px 0; font-size:25px; font-weight:600; text-align:center;}
.contents p {line-height:20px; font-size:14px;}

.layerPopup {display:none;}
.layerPopup:before {display:block; content:""; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5);}
.layerPopup .layerBox {position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); padding:30px; background:#fff; border-radius:6px;}
.layerPopup .layerBox .title {margin-bottom:10px; padding-bottom:10px; font-weight:600; border-bottom:1px solid #d9d9d9;}
.layerPopup .layerBox .cont {margin-bottom:40px;}
.layerPopup .layerBox p {line-height:20px; font-size:13px;}
.layerPopup .layerBox .btnClose {display:inline-block; position:absolute; right:30px; top:25px; padding:6px 12px; color:#444; font-size:12px; text-decoration:underline;}
.layerPopup .layerBox .btnTodayHide {font-size:13px; font-weight:600; text-decoration:underline;}

/* Javascript */
var $layerPopup = document.querySelector('.layerPopup');
var $btnLayerPopupClose = document.querySelector('.layerPopup .btnClose');
var $btnLayerPopupTodayHide = document.querySelector('.layerPopup .btnTodayHide');

//최초 레이어팝업 노출
layerPopupShow();

//레이어팝업 닫기 버튼 클릭
$btnLayerPopupClose.addEventListener('click', function(){
    layerPopupHide(0);
});

//레이어팝업 오늘 하루 보지 않기 버튼 클릭
$btnLayerPopupTodayHide.addEventListener('click', function(){
    layerPopupHide(1);
});

//레이어팝업 노출
function layerPopupShow(){
    $layerPopup.style.display = 'block'
}
//레이어팝업 비노출
function layerPopupHide(state){
    $layerPopup.style.display = 'none'
    if(state === 1){
    	//cookie처리
    }
}

위코드의 결과물, 레이어팝업 노출 샘플 - 닫은 후 새로고침하면 다시 뜬다.

페이지 로드와 동시에 자바스크립트 layerPopupShow() 함수호출을 통해 레이어팝업이 노출되고 있다. 그리고 닫기 버튼을 클릭하면 layerPopupHide() 함수를 호출하여 레이어팝업을 숨김처리 하고 있다. 숨긴 후 새로고침을 하면 다시 열리게된다. 오늘하루보지않기 (편의상 띄어쓰기 제거) 버튼을 클릭하면 우선 닫기버튼과 동일하게 레이어팝업이 닫혀야하기 때문에 동일하게 layerPopupHide() 함수를 호출한다. 단, 하루안에 재접속(새로고침) 하면 레이어팝업이 뜨지 않아야 하기 때문에 닫기버튼과 오늘하루보지않기 버튼을 구분하기 위하여 layerPopupHide() 함수 호출 시 전달 인자값으로 각각 0과 1을 넣어주었고, layerPopupHide() 함수 내에서는 매개변수 state를 확인하여 1의 값이면 오늘하루보지않기 버튼을 누른것으로 판단하여 기능을 해당 기능이 작동되도록 만들었다. 그럼 오늘하루보지않기 버튼을 눌렀을때의 기능을 구현하기 위해 layerPopupHide() 함수를 수정해보자.

---

아, 수정전에 jquery cookie js파일을 다운로드 받아 로드해야한다. (jquery cookie js를 사용안해도 구현가능하지만 그렇게되면 귀찮으니 (사실 소스야 퍼오면 되지만..) 쉽게 jquery cookie를 사용하려고 한다.) 

아래 URL에서 다운로드 가능하다.

https://plugins.jquery.com/cookie/

jQuery Cookie | jQuery Plugin Registry

jQuery Cookie 웹사이트 캡쳐

jQuery Cookie이기 때문에 당연히 jQuery도 같이 로드해야 기능을 사용할 수 있다. 

편의를 위해 아래 jquery와 jQuery Cookie js의 CDN URL도 적어두었으니 그대로 본인 페이지에 가져가 사용하면 된다. 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

다시 Javascript 코드 부분으로 돌아와 아래와 같이 코드를 수정 및 추가한다.

/* Javascript */
var $layerPopup = document.querySelector('.layerPopup');
var $btnLayerPopupClose = document.querySelector('.layerPopup .btnClose');
var $btnLayerPopupTodayHide = document.querySelector('.layerPopup .btnTodayHide');

//최초 레이어팝업 노출 (testCookie라는 이름의 쿠키가 존재하지 않으면 레이어 노출)
if(!$.cookie('testCookie')){
	layerPopupShow();
}

//레이어팝업 닫기 버튼 클릭
$btnLayerPopupClose.addEventListener('click', function(){
    layerPopupHide(0);
});

//레이어팝업 오늘 하루 보지 않기 버튼 클릭
$btnLayerPopupTodayHide.addEventListener('click', function(){
    layerPopupHide(1);
});

//레이어팝업 노출
function layerPopupShow(){
    $layerPopup.style.display = 'block'
}
//레이어팝업 비노출
function layerPopupHide(state){
    //닫기버튼 오늘하루보지않기 버튼 무관하계 레이어팝업은 닫는다.
    $layerPopup.style.display = 'none'

    //오늘하루보지않기 버튼을 누른 경우
    if(state === 1){
    	//'testCookie' 이름의 쿠키가 있는지 체크한다.
        if($.cookie('testCookie') == undefined){
            //쿠키가 없는 경우 testCookie 쿠키를 추가
            $.cookie('testCookie', 'Y', { expires: 1, path: '/' });
            /**
                설명 :
                임의로 testCookie라는 이름에 Y라는 값을 넣어주었고,
                expires값으로 1을 주어 1일 후 쿠키가 삭제되도록 하였다.
                path값을 '/'로 주면 해당사이트 모든페이지에서 유효한 쿠키를 생성한다.
                특정페이지에서만 작동하려면 페이지 경로를 작성하면 된다.
            **/
        }        
    }
}

위 코드에서 'testCookie'라는 쿠키(cookie) 이름은 임의로 작성한 것이므로 성격에 맞게 수정하여 사용하면 된다. 위와 같이 수정 후 다시 확인해보자.

최종 결과물 - 오늘하루보지않기 클릭 시 새로고침해도 레이어팝업이 뜨지 않는다.

 

다시 확인해보면 닫기 버튼을 클릭 후 새로고침하면 레이어팝업이 다시 뜨고, 오늘하루보지않기 버튼을 클릭하면 쿠키가 생성되어 새로고침해도 뜨지 않는 것을 확인할 수 있다.

---

참고로 어떤 이유로 인해 생성된 쿠키를 삭제하고 싶거나 기능을 추가하고싶다면 아래와 같이 기능을 추가해주면 된다.

//Javascript
//testCookie이름의 쿠키 삭제
$.cookie('testCookie', null);

//만약 쿠키 생성 시 path를 지정해줬다면 
$.cookie('testCookie', null, {path:'/'});

또는 아래와 같이 웹브라우저의 개발자도구에서 Application > Cookies > 에서 직접 원하는 쿠키를 삭제할 수 있다.

 

크롬 웹브라우저 쿠키 삭제

---

2019/08/28 - [JavaScript] - 강제로 body 스크롤막기 (PC, Mobile (iOS, Android..) 모든 환경)

강제로 body 스크롤막기 (PC, Mobile (iOS, Android..) 모든 환경)

2019/09/20 - [CSS] - CSS 로딩UI 만들기 #1. 회전하는 원(Circle)

CSS 로딩UI 만들기 #1. 회전하는 원(Circle)

2019/09/19 - [JavaScript] - lozyload, 미디어 콘텐츠 지연로딩 시키기 (feat. jQuery Lazy)

lozyload, 미디어 콘텐츠 지연로딩 시키기 (feat. jQuery Lazy)