JS - Cookie 다루기

Cookie 를 이용하면 사용자에 대한 간단한 정보를 사용자 컴퓨터에 텍스트 형태로 저장할 수 있습니다. 이러한 정보는 사용자 식별에 사용됩니다.

쿠키는 300개 이상의 쿠키를 만들 수 없고, 하나의 도메인당 최대 20개, 개당 5000자를 넘지 않는다면 사용은 자유롭습니다.

쿠키는 사용자가 여러 웹 사이트에 접속하면 많은 쿠키들이 로컬 컴퓨터에 저장됩니다. 브라우저 마다 쿠키를 저장하는 방식은 다르며 하나의 파일에 모든 정보를 담기도 하고, 별도의 파일에 저장하기도 합니다.

쿠키의 형식은 예시와 같이 "이름 = 값"의 형식으로 저장되며 세미콜론(;)으로 구분해서 여러 값들이 저장됩니다.

key=value; [expires=DATE; path=PATH; domain=DOMAIN; secure; HttpOnly]

key=value 는 사용자 값이며 [..] 에는 쿠키 헤더 값들이 저장됩니다.

속 성	설 명
expires	쿠키 만료 날짜를 설정. 초로 설정 값을 비우면 브라우저를 닫을 때까지 쿠키를 유지 날짜 형식: DD-MM-YY H:M:S GMT
path	쿠키가 허용되는 경로 /로 설정하면 디렉터리 전체에서 사용 가능함
domain	쿠키를 공유할 도메인 이름을 지정 Ex.) domain=example.com 이면 xxx.example.com 과 쿠키를 공유함
secure	https와 같은 보안 프로토콜을 통해서만 전송
HttpOnly	HTTP 통신 외에 다른 통신으로 쿠키 전송 불가 따라서 document.cookie 와 같이 Javascript 에서 접근 불가

쿠키 제어

자바스크립트에서 쿠키에 접근하는 방법은 다음과 같습니다.

document.cookie;

쿠키를 웹 서버로 전송할 때는 사용자 값만 전송하기 때문에 실제적으로 아래와 같이 사용자 값을 다수 저장할 수 있습니다.

document.cookie = "이름 = 값; 이름2 = 값; 이름3 = 값; ... ";

자바스크립트에서 제어할 수 있는 값들은 아래와 같습니다.

document.cookie = key=value; 
  [expires=DATE; path=PATH; domain=DOMAIN; secure]

쿠키를 만들기 위해 아래와 같이 문자열을 지정하면 하나 또는 다수의 값을 한번에 저장할 수 있습니다.

<script>
document.cookie = "name=php";
document.cookie = "age=20";
document.cookie = "job=백수";

document.write( document.cookie );
/*
결과:
  age=20; name=php; job=백수
*/
</script>

이렇게 저장된 쿠키를 불러오거나 삭제, 변경할 때는 이렇게 합니다.

<script>
// 쿠키를 불러올 때는 ...
document.write( document.cookie );
// age=20; name=php; job=백수


// 쿠키를 수정할 때는 ...
// name 의 값을 "하보니"로 변경합니다.
document.cookie = "name=하보니";
document.write( document.cookie );
// age=20; job=백수; name=하보니


// 쿠키를 삭제할 때는 ...
// name 의 값을 지웁니다.
document.cookie = "name=";
document.write( document.cookie );
// age=20; job=백수; name=
</script>

예제

이제 쿠키를 만들고, 삭제하고, 만료 날짜를 설정할 수 있는 함수를 만들어 보겠습니다.

<script>
// 쿠키 값을 출력하는 함수
function getCookie(key){
  var cookies = document.cookie.split(";");
  for(var i = 0; i < cookies.length; i++) {
    var keys = cookies[i].split("=");
    if(keys[0].trim() == key) {
      if(keys[1].trim() != "") {
        return keys[1].trim();
      }
    }
  }
  return "";
}

/*
 쿠키를 만드는 함수
 key = 이름
 value = 값
 expires = 쿠키를 보관할 일 수. 기본 값 1(일)
*/
function setCookie(key, value, expires = 1) {
  var cookies = key + "=" + value;
  var exp = (expires == "") ? "" : (86400 * expires);

  document.cookie = cookies + ";" + exp + "; path=/";
}



/*
 여기부터 쿠키 테스트...
*/
// 이름과 나이를 쿠키로 저장합니다.
setCookie("name", "하보니");
setCookie("age", "20");

document.write( document.cookie );
// age=20; name=하보니


// 이름이 있으면 경고창이 뜹니다.
if(getCookie("name") != "") {
  alert(getCookie("name") + " 님 반갑습니다.");
}

// 이름을 삭제합니다.
setCookie("name", "");



// 이름이 없으면 메시지를 띄웁니다.
if(getCookie("name") == "") {
  alert("안녕히 가세요.");
}
</script>