자바 스크립트 쿠키


A 쿠키 서버 / 웹 사이트가 사용자의 컴퓨터로 보내는 작은 파일로 브라우저에 저장됩니다. 현대 웹 사이트는 클라이언트와 관련 정보를 기억하기 위해 쿠키를 엄청나게 사용합니다. 페이지가로드되면 servevr이 저장된 쿠키를 확인합니다. 이것이 많은 웹 사이트에서 몇 번이고 로그인 할 필요가없는 이유입니다.

쿠키 생성

쿠키는 키 값 쌍으로 사용되며 각 키에는 할당 된 값이 있습니다. 자바 스크립트를 사용하면 document.cookie 속성을 사용하여 쿠키를 만들고, 읽고, 쓰고, 삭제할 수 있습니다.

document.cookie = "name=some name";

세미콜론을 사용하여 동일한 쿠키에 여러 값을 저장할 수 있으며 만료 시간을 추가 할 수도 있습니다.
document.cookie = "fname = first;lname = last;expires = Wed, 20 Sept 2017 10:00:00 UTC"

쿠키 삭제

쿠키는 만료되면 자동으로 삭제됩니다. 그러나 쿠키를 덮어 써서 의도적으로 삭제할 수 있습니다. 삭제하려는 모든 키 값 쌍에 대해 값을 비워두기 만하면됩니다.

document.cookie = "fname = ;lname = ;expires = Thu, 01 Jan 1970 00:00:00 UTC"

쿠키 예

이제 쿠키를 사용하여 정보를 저장하고 확인하는 작은 앱을 시도해 보겠습니다.

HTML 만들기

<input type="text" class="form-control" id='data'>
<button class="btn center-block btn-primary" id='submit'>Go</button>

자바 스크립트

버튼에 이벤트 리스너를 연결하고 입력 상자에서 값을 가져옵니다.

document.getElementById('submit').addEventListener("click", function(){
    var name = document.getElementById("data").value;
    setCookie(name);
});

쿠키 설정

function setCookie(name) {
    document.cookie = "name =" + name;
};

쿠키 받기

아래와 같이 document.cookie를 사용하여 쿠키 값을 얻을 수 있습니다.

window.onload = function(event){ 
	var name = "name =";
	var decodedCookie = decodeURIComponent(document.cookie);
	data = decodedCookie.split('=')[1]
	if(data!='undefined')
		document.write(data);
}

쿠키에 대한 완전한 코드

다음은 HTML 및 JavaScript를 사용하여 쿠키를 사용하는 방법에 대한 전체 코드입니다.

<html>
	<head>
		<meta charset='utf-8'>
		<title>Cookies</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<style>
			.well{
				font-weight: bold
			}
		</style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
				<h2>Cookies App</h2>
				<input type="text" class="form-control" id='data'>
				<br>
				<button class="btn center-block btn-primary" id='submit'>Go</button>
				</div>
			</div>
		</div>


		<script>	
			window.onload = function(event){ 
				var name = "name =";
			    var decodedCookie = decodeURIComponent(document.cookie);
			    data = decodedCookie.split('=')[1]
				if(data!='undefined')
					document.write(data);
			}

			function setCookie(name) {
			    document.cookie = "name =" + name;
			};

			document.getElementById('submit').addEventListener("click", function(){
			    var name = document.getElementById("data").value;
			    setCookie(name);
			}); 
		</script>
	</body>
</html>