[jQuery/JavaScript] 쿠키(cookie) 값 설정 및 사용법

웹 사이트에 쿠키를 이용하면 여러가지 것들을 만들 수 있습니다~

어떤 배너를 오늘 하루 보지 않기, 로그인 접속자만 보이기, 브라우저로 새 접속시에만 보기 등등..

무언가 고유한 값을 저장해놓고 사용할 수 있게 됩니다.

변수는 프로그램이 실행될때 초기화가 되고 값이 부여되고, 프로그램을 닫으면 모두 소멸됩니다.

데이터베이스는 데이터를 지우지 않는 이상 계속 남아있게 되지만 전용 서버가 있어야 합니다.

하지만 쿠키는 일정 기간 동안 지워지지 않고 클라이언트 PC에 저장되게 됩니다.

즉, 유저 마다 고유한 어떤 값을 프로그램 종료시에도 보관하고 있게 되는 겁니다.

이런 쿠키는 여러 사이트에서 볼 수 있습니다. 

이번에 제가 포스팅 해볼 것은 쿠키에 대한 것으로 브라우저로 새 접속시의 쿠키 사용 입니다.

예제는 이렇 습니다. 

어떤 배너가 있고, 이 배너를 닫기 버튼으로 닫을 시에 안 보이게 되고, 브라우저를 껐다가 키지 않는 이상 

모든 페이지에서 배너가 안 보이게 됩니다. 쿠키가 있어서 가능한 예제이죠. 

예제 코드는 아래와 같습니다.

jQuery(function(){
   checkTopBannerClose();
});
function checkTopBannerClose(){
   if(jQuery.cookie("isCloseTopBanner") == "no") {
      jQuery(".head_banner_bar_mo").css("display", "none");
   } else {
      jQuery(".head_banner_bar_mo").css("display", "block");
   }
}
function closeTopBanner(){
   jQuery.cookie('isCloseTopBanner', 'no', { path : '/' });
   this.checkTopBannerClose();
}

<div class="head_banner_bar_mo">
   <div class="ment">
      <span class="close-btn" onclick="closeTopBanner();"> 배너내용 </span>
   </div>
</div>

jQuery.cooke() 혹은 $.cookie()로 쿠키를 만듭니다. 간단하죠? 이러면 쿠키가 구워집니다. 실제 쿠키 요리에 비해 매우 쉽네요. 오븐 같은 것은 필요 없습니다. 

쿠키 생성 함수의 원형은 jQuery.cookie('key', 'value'); 가 됩니다.

위의 예제 스크립트 코드를 한글로 풀어 설명 하자면 

해당 페이지에 접속하면 'checkTopBannerClose()'가 실행되고 'checkTopBannerClose()'는 'isCloseTopBanner'라는 키를 가진 쿠기의 값이 'no' 인지 체크하여 'no'이면 배너를 안보이게 합니다. 브라우저를 종료하고 다시 켜도 안보입니다.

다시 보이게 하려면 쿠키를 지워야합니다. 다들 인터넷 로그 지우실 때 쿠키도 없애겠냐는 체크항목란이 있죠? 이 것을 체크한 상태로 지우면 쿠키가 다 삭제되게 됩니다.

이어서 쿠키가 만약 no가 아니라면 (cookie가 설정되있지 않을 경우엔 null을 반환합니다.) 그대로 배너를 보이게 합니다.

그리고 closeTopBanner()는 '닫기' 버튼 시 호출될 함수 입니다.

닫기를 누르면 cookie를 설정하고 checkTopBannerClose()를 호출하여 쿠키를 숨깁니다.

그럼 모두 즐코딩 되세요~ 

도움이 되셨다면 아래 공감 버튼을 꾸욱! 

▼▼▼▼▼▼