[자바스크립트] 쿠키 굽기

<!-- 카톡 1:1문의 -->
	<style>
		.c_kakao {position: fixed; height: 74px; bottom: 20%; right: 0; animation: kakao 2s linear infinite; z-index: 100;}
		.c_kakao p {position: absolute; left: -20px; background: #3c1e20; width: 20px; height: 74px; border-radius: 5px 0 0 5px;}
		.c_kakao a.on {display: none;}
		.c_kakao .c_btn {font: 0/0 all}
		.c_kakao p:after {content: "close  x"; writing-mode: vertical-lr; transform: rotate(180deg); display: block; text-align: center; position: absolute; top:0; left: 50%; bottom: 0; color: #fff; font-size: .8rem;}
		.c_kakao p.on:after {content: "kakao";}
		.c_kakao .btn_toggle {position: absolute; top: -12px; left: -35px; width: 35px; height: 100px; z-index: 1;}
		@keyframes kakao {
			0% { bottom: 20%; }
			50% { bottom: 19%; }
			100% { bottom: 20%; }
		}
	</style>

	<div class="c_kakao">
		<a class="btn_toggle" href="#none" onclick="closeKt();"></a>
		<p class="c_btn on">닫기</p>        
		<a href="http://pf.kakao.com/_FDZPT/chat" class="kt_link on" target="_blank" onclick="ga('send','event','button','click','카톡상담');">
			<img src="/images/main/btn_kt_inquiry.gif" alt="카톡 1:1문의">
		</a>
	</div>

	<script>
		/*
		1. 쿠키가 있으면 off
		2. 쿠키가 없으면 on
		- 최초 상태는 on상태
		*/

		//getCookie
		function getCookie( name ) {
			var nameOfCookie = name + "=";
			var x = 0;
			while ( x <= document.cookie.length ) {
				var y = (x+nameOfCookie.length);
				if ( document.cookie.substring( x, y ) == nameOfCookie ) {
						if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
								endOfCookie = document.cookie.length;
						return unescape( document.cookie.substring( y, endOfCookie ) );
				}
				x = document.cookie.indexOf( " ", x ) + 1;
				if ( x == 0 )
				break;
			}
			return "";
		}
		if ( getCookie( "kt_inquiry" ) != "done" ) { //쿠키가 없으면
			$(".c_kakao .btn_toggle").siblings().removeClass("on"); // off
		}

		//setCookie
		function setCookie( name, value, expiredays ){
			var todayDate = new Date();
			todayDate.setDate( todayDate.getDate() + expiredays );
			document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
		}


		function closeKt(){ // 문의하기 닫기
			setCookie( "kt_inquiry", "done" ,1 ); //쿠키 생성

			if( $(".c_kakao p").is(".on") ){	// off 상태면	
				$(".c_kakao .btn_toggle").siblings().removeClass("on"); // on
				setCookie("kt_inquiry", "", "-1"); // 쿠키 삭제
			}else {
				$(".c_kakao .btn_toggle").siblings().addClass("on"); // off	
			}
		}
	</script>
<!-- //카톡 1:1문의 -->

 

쿠키 사용해서 이벤트 제어하기.

 

 

setCookie로 쿠키를 설정하고

getCookie로 쿠키를 굽는다.

 

쿠키 이벤트를 줄 태그에 onclick을 추가. 함수로 제어한다.

 

 

위 소스는 토글 이벤트에 쿠키를 적용한거다.

카카오톡 아이콘이 처음엔 보여지고 닫기를 누르면 다시 오픈을 누르기 전까지 계속 닫힌 상태여야 한다.

그러다가 다시 오픈을 하면 또 오픈한 상태로 유지한다.