쿠키 Java스크립트: 설정, 가져오기 및 삭제 예제

쿠키는 무엇입니까?

쿠키는 브라우저에서 액세스할 수 있도록 컴퓨터에 저장되는 데이터입니다. 또한 쿠키의 이점을 알고 있거나 모르고 누리고 있을 수도 있습니다. Facebook 비밀번호를 저장하여 로그인을 시도할 때마다 매번 입력하지 않아도 되도록 한 적이 있습니까? 그렇다면 쿠키를 사용하고 있는 것입니다. 쿠키는 키/값 쌍으로 저장됩니다.

쿠키가 왜 필요한가요?

A 사이의 통신 웹 브라우저 서버는 HTTP라는 무상태 프로토콜을 사용하여 발생합니다. 상태 비저장 프로토콜은 각 요청을 독립적으로 처리합니다. 따라서 서버는 데이터를 브라우저로 보낸 후 데이터를 보관하지 않습니다. 그러나 많은 상황에서는 데이터가 다시 필요합니다. 여기 쿠키가 그림으로 등장합니다. 쿠키를 사용하면 웹 브라우저는 데이터가 필요할 때마다 서버와 통신할 필요가 없습니다. 대신 컴퓨터에서 직접 가져올 수 있습니다.

Javascript 쿠키 설정

문서를 이용하여 쿠키를 생성할 수 있습니다. 이와 같은 쿠키 속성.

document.cookie = "cookiename=cookievalue"

특정 쿠키가 지정된 날짜에 컴퓨터에서 제거되도록 쿠키에 만료 날짜를 추가할 수도 있습니다. 만료 날짜는 UTC/GMT 형식으로 설정되어야 합니다. 만료 날짜를 설정하지 않으면 사용자가 브라우저를 닫을 때 쿠키가 제거됩니다.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2014 20:00:00 UTC"

또한 쿠키가 속한 특정 도메인의 도메인과 디렉터리를 지정하기 위해 도메인과 경로를 설정할 수도 있습니다. 기본적으로 쿠키는 쿠키를 설정하는 페이지에 속합니다.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2014 20:00:00 UTC; path=/ "

//현재 페이지에 대한 도메인과 전체 도메인에 대한 경로가 포함된 쿠키를 생성합니다.

Java스크립트 쿠키 가져오기

현재 도메인에 대해 저장된 모든 쿠키를 반환하는 이와 같은 쿠키에 액세스할 수 있습니다.

var x =  document.cookie

Java스크립트 쿠키 삭제

쿠키를 삭제하려면 쿠키 값을 공백으로 설정하고 만료 값을 전달된 날짜로 설정하면 됩니다.

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

이 예제를 직접 시도해 보세요

코드 작동을 위한 특별 지시…실행 버튼 두 번 누르기

<html>
<head>
	<title>Cookie!!!</title>
	<script type="text/javascript">
		function createCookie(cookieName,cookieValue,daysToExpire)
        {
          var date = new Date();
          date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
          document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
        }
		function accessCookie(cookieName)
        {
          var name = cookieName + "=";
          var allCookieArray = document.cookie.split(';');
          for(var i=0; i<allCookieArray.length; i++)
          {
            var temp = allCookieArray[i].trim();
            if (temp.indexOf(name)==0)
            return temp.substring(name.length,temp.length);
       	  }
        	return "";
        }
		function checkCookie()
        {
          var user = accessCookie("testCookie");
          if (user!="")
        	alert("Welcome Back " + user + "!!!");
          else
          {
            user = prompt("Please enter your name");
            num = prompt("How many days you want to store your name on your computer?");
            if (user!="" && user!=null)
            {
            createCookie("testCookie", user, num);
            }
          }
        }
	</script>
</head>
<body onload="checkCookie()"></body>
</html>