Jam's story

[JS] 쿠키 본문

WEB/JavaScript

[JS] 쿠키

애플쩀 2022. 6. 13. 07:55 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.13 07:01:34</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex01.html</h3>
쿠키이름: <input type="text" id="cname"  /><br>
쿠키 값: <input type="text" id="cvalue"  /><br>
<button onclick="btn_allCookies()">쿠키</button>
<button onclick="btn_setCookies()">쿠키</button>
<button onclick="btn_Cookies()">쿠키</button>
<button onclick="btn_Cookies()">쿠키</button>
<p id="demo"></p>
<script>
    function btn_allCookies(){
        var cookies=getAllCookies();
        $("#demo").html(cookies);
    }
</script>
</body>
</html>
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; //모든 쿠키 가져오겠다는 
}
<!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>
저작자표시 (새창열림)

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

[JS] 쿠키  (0) 2022.06.10
[JS] 모달창  (0) 2022.06.10
[JS] oncontextmenu (오른쪽마우스) ,onmousedown  (0) 2022.06.10
[JS]window.alert()  (0) 2022.06.10
[JS] 새창 열고 닫기  (0) 2022.06.09
'WEB/JavaScript' Related Articles more
Comments