쿠키

  쿠키 활용

컴퓨터에서 텍스트 파일로 저장된 데이터. 쿠키는 사용자에 관한 정보를 기억하는 용도의 데이터 이다.

세션과 쿠키를 확실하게 구분 지을 수 있어야 한다. 세션-서버에 저장, 쿠키-???

 · 쿠키의 사용처 ☞ 데이터 저장

 

▶ setCookie, getCookie

w3school.com의 setCookie와 getCookie 소스코드를 활용해보자.

 - setCookie

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

- getCookie

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

 

 

▶ 쿠키를 활용하여 하루동안 팝업창 띄우지 않기

1) 팝업창 띄우기 실습

 - popup.html

<button type="button" id="popupOpen">popupOpen</button>
<script>
	var popupOpen = document.getElementById('popupOpen');
    popupOpen.addEventListener('click',function(){
    	window.open('popupCall.html','팝업띄우기',
        			'width=300px, height=500px, scrollbars=no');
    });
</script>

 - popupCall.html

<button type="button" id="popupClose">popupClose</button>
<script>
	var popupClose = document.getElementById('popupClose');
    popupClose.addEventListener('click',function(){
    	close();
    });
</script>

단순히 버튼 클릭시 팝업창을 띄우는 이벤트를 발생시키고, 뜬 팝업창 내의 버튼을 클릭시 팝업창을 닫는 이벤트를 발생시킨다. 이를 활용하여 다음 실습도 해보자.

 

2) 팝업창 띄우기 실습 + 쿠키로 데이터를 저장하여 하루동안 띄우지 않기

 - popup.html

<button type="button" id="popupOpen" >popupOpen</button>
<script>
	var popupOpen = document.getElementById('popupOpen');
	popupOpen.addEventListener('click',function(){
		var cName = getCookie('popupCheck');
		if(cName !='Y'){		
			window.open('popupCall.html', '팝업띄우기', 
				   		'width=300px, height=500px, scrollbars=no');
		}
	});
	//getCookie
    function getCookie(cname) {
  	var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    return "";
	}
</script>

 - popupCall.html

<button type="button" id="popupClose">popupClose</button><br/>
<input type="checkbox" id="popOpenCheck"> 오늘 하루 보지 않기
<script>
	var popupClose = document.getElementById('popupClose');
	popupClose.addEventListener('click',function(){
		var popOpenCheck = document.getElementById('popOpenCheck');
		if(popOpenCheck.checked){
			setCookie('popupCheck','Y',1);			
		}
		window.close();
	});
	//setCookie
	function setCookie(cname, cvalue, exdays) {
  	var d = new Date();
  	d.setTime(d.getTime() + (exdays*24*60*60*1000));
  	var expires = "expires="+ d.toUTCString();
  	document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
	}
</script>

버튼을 클릭시 팝업창 내의 체크박스의 체크 여부를 점검하고, 체크되있지 않은 경우에만 팝업창을 띄우도록 한다.

popupCall.html 파일의 스크립트 내에서는 팝업창의 체크박스를 체크시 하루동안 뜨지 않는 소스코드를 만든다.

popup.html 파일에 getCookie 함수를 popupCall.html 파일에는 setCookie 함수를 붙여넣는다.

 

 

▶ 쿠키를 활용하여 아이디 저장

<input type="text" id="userId" placeholder="아이디입력"/>
<button type="button" id=idSave> 아이디 저장하기 </button> 	
<script>
	var idSave = document.getElementById('idSave');
 	idSave.addEventListener('click',function(){
 		var userId = document.getElementById('userId');
 		var userIdValue = userId.value;
 		if(userIdValue !='' && userIdValue !=undefined){
 			setCookie('userId',userIdValue, 1);
		}
	});
 	var getUserId = getCookie('userId');
 	if(getUserId !=''){
 		var userId = document.getElementById('userId');
 		userId.value = getUserId;
 	}
 	//set
 	function setCookie(cname, cvalue, exdays) {
 		var d = new Date();
 		d.setTime(d.getTime() + (exdays*24*60*60*1000));
 		var expires = "expires="+ d.toUTCString();
 		document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
 	}
 	//get
 	function getCookie(cname) {
 		var name = cname + "=";
 		var decodedCookie = decodeURIComponent(document.cookie);
 		var ca = decodedCookie.split(';');
 		for(var i = 0; i <ca.length; i++) {
 			var c = ca[i];
 		 	while (c.charAt(0) == ' ') {
 		    c = c.substring(1);
 			}
 		    if (c.indexOf(name) == 0) {
 		      return c.substring(name.length, c.length);
 		    }
 		}
 		  return "";
	}
</script>

마찬가지로 스크립트 코드 중 위의 setCookie와 getCookie 함수를 설정하여야 한다.(복붙on)

아이디 저장하기 버튼을 클릭시 텍스트박스의 value 값을 setCookie 함수에 저장한다.