다연이네

[days08] 쿠키(Cookie) 본문

Web/JavaScript

[days08] 쿠키(Cookie)

　다연　 2020. 12. 18. 20:10
반응형


쿠키(Cookies)
1. js -> 쿠키 생성 : 사용자가 (어떤 의도에 의해) 본인 PC(컴퓨터)에 [텍스트 파일]로 저장한 데이터 

           (사용자 정보 등 / 장바구니)
2. 상태 저장 방법으로 클라이언트 측에 저장하는 방법 : 쿠키
3. document.cookie 속성으로 [js 쿠키 관리]
4. 형식 : name="nameValue";  쿠키명  (필수)
            expires="expireDate";  만료시점 (선택) 설정 안하고 브라우저 닫으면 쿠키는 삭제됨
            path="pathHolders";  경로 (선택)
            domain="domainName";  도메인 (선택) localhost
            secure  보안 (선택)

JSP(서버)에서 쿠키 관리

 

 

기본 모습

버튼으로 모든 쿠키 정보를 확인할 수 있고,

쿠키를 생성할 수 있고,

id를 입력해 쿠키 값을 확인할 수 있고,

id를 입력해 해당 쿠키를 삭제할 수 있게 한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
쿠키 이름 : <input type="text" id="cname" /><br>
쿠키 값 : <input type="text" id="cvalue" /><br>
<button onclick="getAllCookies()"> 모든 쿠키 정보 확인 </button>
<button onclick="setCookie()">쿠키 생성</button>
<button onclick="getCookie()">쿠키 확인</button>
<button onclick="delCookie()">쿠키 삭제</button>
<p id="demo"></p>
<script>	
	
	function delCookie() {
		var cname = $("#cname").val();
		//쿠키를 삭제할 때는 만료시점을 과거로 설정해서 다시 쿠키 생성(저장)
		
		var now = new Date();
		now.setDate(now.getDate()-1); //오늘날짜-1일 (과거로 만들기)
		
		//쿠키 저장
		document.cookie = cname+"=; expires="+now.toUTCString();
								//삭제할거니 cvalue는 필요 없겠다
	}
	
	
	function getCookie() {
		var cname = $("#cname").val();
		// "id=admin; color=red; age=30"
		var cookies = document.cookie;
		//var cookieArray = cookies.split(";");
		var cookieArray = cookies.split(/;\s/);
		/*
		cookieArray.forEach(function(elt, i, array) {
			//cookie += elt+"<br>";
			//$("#demo").html(cookie);
			var nv = elt.split("=");
			if (nv[0]==cname) { //똑같으면 쿠키 찾아진것
				$("#demo").html(unescape(nv[1])); 
                //unescape: 저장할때 escape로 저장했으니 출력할때 유니코드값을 다시 바꿔주는 것
				return; //forEach() 중간
				//강제 예외 발생 - 중단 
				//사용하려면 return이 아니라 throw를 줘서 강제로 예외 발생시켜야 함
				//왜냐. foreach는 중단에 중단하면 안되는 함수라 빠져나올거면 
                //강제로 예외를 발생시켜야 한다
			}
		}); 안된다
		*/
		
		//foreach 대신 for문 쓰니 된다
		for (var i = 0; i < cookieArray.length; i++) {
			var nv = cookieArray[i].split("=");
			if (nv[0]==cname) { //똑같으면 쿠키 찾아진것
				$("#demo").html(unescape(nv[1])); 
                //unescape: 저장할때 escape로 저장했으니 출력할때 유니코드값을 다시 바꿔주는 것
				return;
			}
		}		
		
		$("#demo").html("찾는 쿠키는 존재하지 않습니다");			
	}
	
	function setCookie() {
		var cname = $("#cname").val();
		var cvalue = escape($("#cvalue").val());
		//쿠키값(cvalue) 	escape() 저장 -> %uBC30%uB2E4%uC5F0 한글이 16진수로 출력된다
		//$("#demo").html(escape(cvalue));
		//unescape(??); 16진수를 한글로 바꾸자
		
		//만료시점(10일)
		var now = new Date();
		now.setDate(now.getDate()+10); //오늘날짜+10일 (18+10=28)
		
		//쿠키 저장
		document.cookie = cname+"="+cvalue+"; expires="+now.toUTCString();
		
		//텍스트 박스 초기화
		$("#cname").val("");
		$("#cvalue").val("");
		
		//브라우저 우측 점3개 -> 설정
	}
	
	
	function getAllCookies(){
		var cookies = document.cookie;		//string 돌리는데
		if (cookies) { 	//if 줘도 되냐? => null, "", 0, undefined, -0 등등 다 false이기 때문에 가능
		$("#demo").html(cookies);			
		}else{
		$("#demo").html("쿠키 존재x");						
		}
	}
</script>
</body>
</html>

주의할 점

- 쿠키를 삭제할 때는 만료시점을 과거로 설정해서 다시 쿠키를 생성(저장)하면 된다.

- foreach 문은 중단에 중단하면 안되는 함수이다.

   빠져나와야 할 경우 return이 아니라 throw를 줘서 강제로 예외 발생시켜야한다.

- 쿠키의 nameValue를 설정할 때는 escape, 불러올 때는 unescape를 주자

    var cvalue = escape($("#cvalue").val()); 

    $("#demo").html(unescape(nv[1]));

 

 

위 코딩을 cookie.js로 자바스크립트를 따로 빼 코딩해보자

cookie.js

/**
 *  cookie.js
 */

	function delCookie(cname) { //매개변수로 쿠키명 받기
	
		if(getCookie(cname)){
			
		var now = new Date();
		now.setDate(now.getDate()-1); 

		document.cookie = cname+"=; expires="+now.toUTCString();
		}		
	}
	
	
	function getCookie(cname) {

		var cookies = document.cookie;
		var cookieArray = cookies.split(/;\s/);
		
		for (var i = 0; i < cookieArray.length; i++) {
			var nv = cookieArray[i].split("=");
			if (nv[0]==cname) { 
				return unescape(nv[1]); 
				
			}
		}		
		return null;
	}
	
	
	
	function setCookie(cname, cvalue, exdays) {
		
		var now = new Date();
		now.setDate(now.getDate()+exdays); 
//1970.1.1~ms 값
//now.setTime(	now.getTime + 1000*60*60*24*exdays	) 조작해나가면 된다
		document.cookie = cname+"="+cvalue+"; expires="+now.toUTCString();
		
		//domain = localhost
		//path = /webPro/javascript/days08 
	}
	
	
	function getAllCookies(){
		var cookies = document.cookie;		
		return cookies; //모든 쿠키 가져오겠다는 
	}

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="cookie.js"></script>

</head>
<body>
쿠키 이름 : <input type="text" id="cname" /><br>
쿠키 값 : <input type="text" id="cvalue" /><br>
<button onclick="btn_allCookies()"> 모든 쿠키 정보 확인 </button>
<button onclick="btn_setCookie()">쿠키 생성</button>
<button onclick="btn_getCookie()">쿠키 확인</button>
<button onclick="btn_delCookie()">쿠키 삭제</button>
<p id="demo"></p>
<script>
function btn_allCookies() {
	var cookies = getAllCookies(); //js파일의 함수 호출
	$("#demo").html(cookies);
}
function btn_setCookie() {
	setCookie($("#cname").val(), $("#cvalue").val());
}
function btn_getCookie() {
	var cvalue = getCookie($("#cname").val());
	$("#demo").html(cvalue);
}
function btn_delCookie() {
	var cookies = delCookie($("#cname").val());

}
</script>
</body>
</html>

 

 

 

 

 

 

배경 이미지를 bgimg라는 쿠키 이름으로 item01/item02/item03 저장 
1) bgimg라는 쿠키 이름이 존재한다면 쿠키값을 읽어와 body의 배경으로 설정 
2)  존재하지 않는다면 item01이미지를 배경이미지로 기본 설정

 

라디오 버튼 클릭하면 
1) 배경변경 
2)쿠키저장

기본



bgimg value값으로 item03을 생성한 후에는

라디오 버튼이 옮겨져 있고 배경이 바뀌어져 있다.

라디오버튼을 item02로 맞춘 후에는

bgimg는 item02로 바뀌어져 있다.

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="cookie.js"></script>
</head>
<body>
<table border="1" style="background-color: white;width:400px;margin:0 auto">
  <tr>
     <td><img src="../images/item01.gif" alt="" /></td>
     <td><img src="../images/item02.gif" alt="" /></td>
     <td><img src="../images/item03.gif" alt="" /></td>
  </tr>
  <tr>
     <td><input type="radio" checked="checked"  name="bgImages" id="item01" value="item01" />item01</td>
     <td><input type="radio" name="bgImages"  id="item02" value="item02" />item02</td>
     <td><input type="radio" name="bgImages" id="item03" value="item03" />item03</td>
  </tr>
</table>

<script>
var cname= "bgimg";
var cvalue ;
var exdays = 10; //10일동안 쿠키 살아있게

window.onload= function () {
.gif를 기본 배경으로 설정
	
	cvalue = getCookie(cname);
	if (cvalue) { //쿠키가 있다면
		document.body.style.backgroundImage="url(../images/"+cvalue+".gif)";
		document.getElementById(cvalue).checked ="checked";
	} else {
		document.body.style.backgroundImage="url(../images/item01.gif)";
	}
	//라디오 버튼 클릭하면
	//1) 배경변경
	//2)쿠키저장
	
	var radioButtons = document.getElementsByName("bgImages");
	for (var i = 0; i < radioButtons.length; i++) {
		radioButtons[i].onclick = function() {
			document.body.style.backgroundImage="url(../images/"+this.value+".gif)";
			setCookie(cname, this.value, exdays);
		}
	}//for
}
</script>
</body>
</html>

위 코딩을 jQuery를 사용해 수정해보자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="cookie.js"></script>
</head>
<body>
<table border="1" style="background-color: white;width:400px;margin:0 auto">
  <tr>
     <td><img src="../images/item01.gif" alt="" /></td>
     <td><img src="../images/item02.gif" alt="" /></td>
     <td><img src="../images/item03.gif" alt="" /></td>
  </tr>
  <tr>
     <td><input type="radio" checked="checked"  name="bgImages" id="item01" value="item01" />item01</td>
     <td><input type="radio" name="bgImages"  id="item02" value="item02" />item02</td>
     <td><input type="radio" name="bgImages" id="item03" value="item03" />item03</td>
  </tr>
</table>

<script>
var cname= "bgimg";
var cvalue ="item01";
var exdays = 10; 

$( function () {
	cvalue = getCookie(cname);

	if (cvalue)  {
		$("#"+cvalue).prop("checked",true);
		$("body").css("background-image", "url(../images/"+cvalue+".gif)");
	}
		$("body").css("background-image", "url(../images/item01.gif)");
	
	$(":radio").click(function(event) {
			$("body").css("background-image", "url(../images/"+$(this).val()+".gif)");
			setCookie(cname, $(this).val(), exdays);
		});
});
</script>
</body>
</html>

 

 

 

 

 

 

로그인 성공시 환영합니다 화면으로 넘어간다.

로그아웃 버튼을 누르면 다시 로그인 화면으로 돌아간다.

 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="cookie.js"></script>
<style>
.tblLogin, .tblLogout{
	width: 400px;
	height: 100px;
}
</style>

</head>
<body>
<table id="tblLogin" class="tblLogin" border="1">
  <tr>
    <td>아이디</td>
    <td><input type="text" id="txtid" /></td>
    <td rowspan="2">
      <input type="checkbox" id="ckbLogin" />
      <label for="ckbLogin">ID 저장</label>
      <br>
      <input type="button" id="btnLogin" value="로그인" />
    </td>    
  </tr>
  <tr>
    <td>비밀번호</td>
    <td><input type="password" id="txtpwd" /></td>
  </tr>
</table>
<table id="tblLogout" class="tblLogout" border="1">
  <tr>
    <td>
       <span id="s_id">admin</span> 님 환영합니다.
       <br><input type="button" id="btnLogout" value="로그아웃" />
    </td>
  </tr>
</table>


<script>
	//테이블
	var tblLogin = document.getElementById("tblLogin");
	var tblLogout = document.getElementById("tblLogout");
	//텍스트 박스
	var txtid = document.getElementById("txtid");
	var txtpwd = document.getElementById("txtpwd");
	//체크박스
	var ckbLogin = document.getElementById("ckbLogin");
	//버튼
	var btnLogin = document.getElementById("btnLogin");
	var btnLogout = document.getElementById("btnLogout");
	//
	var members = [{id:"admin", pwd:"1234"}
								,{id:"dayeon", pwd:"1111"}
								,{id:"dongjun", pwd:"4321"}
							];
	
	var cname = "idsave";
	var cvalue;
	var exdays=10;
	
	
	window.onload=function(){
		// idsave 쿠키명으로 저장된 쿠키값이 존재하는지 확인
		// 쿠키가 존재한다면 
		tblLogout.style.display = "none";
		cvalue = getCookie(cname);
		
		if (cvalue) {
			ckbLogin.checked="checked";
			txtid.value= cvalue;
			txtpwd.focus();
		} else {
			txtid.focus();
		}
		
		//로그인 버튼 클릭
		btnLogin.onclick = function() {
			var id = txtid.value;
			var pwd = txtpwd.value;
			//입력받은 id, pwd을 가지고 members 뒤져서
			//1. 로그인 성공
			//2. 아이디가 존재하지 않습니다
			//3. 비밀번호가잘못 되었습니다.
			
			var message = [
				
				"아이디가 존재하지 않습니다."//0
				,"비밀번호가 잘못되었습니다"//1
				,"로그인 성공"
				
			];
			
			var result = 0;
			for (let m of members) {
				if(m.id==id ){
					result = 1;
					if(m.pwd==pwd){
						result=2;
						break;
					}//if
				}//if
			}//for
			alert(message[result]);
			
			if(result==2){
			if(ckbLogin.checked){
				setCookie(cname, id, exdays);
			}else{
				delCookie(cname);
			}
			//로그인 했다면 로그인 페이지는 안보이게 하기
			tblLogin.style.display = "none";
			tblLogout.style.display="block";
			}
			
		}
		
		
		//로그아웃 버튼 클릭
		btnLogout.onclick = function() { 
			tblLogin.style.display = "block";
			tblLogout.style.display="none";
			txtid.value="";
			txtpwd.value="";
		}
		
		//장바구니 : 쿠키 사용해서 처리해도 된다
	}
</script>
</body>
</html>

jQuery로 수정

<script> 
   var members = [{ id:"admin",  pwd:"1234"}
                           ,{id:"dayeon", pwd:"1111"}
                           ,{id:"dongjun", pwd:"4321"}];
   var cname = "idsave";
   var cvalue ;
   var exdays = 10;
   

   $(function (){
      
      $("#tblLogout").css("display", "none");
      cvalue = getCookie(cname);
      
      if (cvalue) {
         $("#ckbLogin").prop("checked", true);
         $("#txtid").val(cvalue);
         $("#txtpwd").focus();
      } else {
         $("#txtid").focus();
      } //
      
      $("#btnLogin").click( function (){
         var id = $("#txtid").val();
         var pwd = $("#txtpwd").val();
         
         var message = [ 
            "아이디가 존재하지 않습니다."   // 0
            ,"비밀번호가 잘못되었습니다."   // 1
            ,"로그인 성공"];                 // 2
            
         var result = 0;
            
         for (let m of members) {
            if( m.id == id  ){
               result = 1;
               if ( m.pwd == pwd) {
                  result = 2;
                  break;
               } // if
            } // if
         } // for
          alert(message[result]);
         
         if (result == 2 ) {
            if(  $("#ckbLogin").prop("checked") ){
               setCookie(cname, id, exdays);
            }else{
               delCookie(cname);
            }
            
            $("#tblLogin").css("display", "none");
            $("#tblLogout").css("display", "block");
         }  
      }); // 
      
      // 로그아웃 버튼 클릭
      $("#btnLogout").click(function(event) {
         $("#tblLogin").css("display", "block");
         $("#tblLogout").css("display", "none");
      }); 
       // btnLogout 클릭
   }); 
    
</script>
반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days08] autocomplete()  (0) 2020.12.18
[days08] 모달(modal)/모달리스  (0) 2020.12.18
[days07] js 팝업상자(대화상자), 클릭시 랜덤 이미지 발생  (0) 2020.12.17
[days07] js BOM  (0) 2020.12.17
[days07] DOM사용 예시  (0) 2020.12.17
'Web/JavaScript' Related Articles more
Comments