[Javascript] 자바스크립트(js) Cookie(쿠키) 사용법

Intro

안녕하세요. 플리체입니다.

이번에는 Javascript를 통하여 Cookie를 제어(생성, 설정) 하는 방법에 대해 공유해 드리겠습니다.

 

- 쿠키란?
브라우저에 저장되는 작은 데이터 조각으로, 이전에 방문한 웹 사이트에 대한 정보를 저장하거나 사용자 지정 환경 설정 등을 유지하는 데 사용됩니다. 쿠키는 일반적으로 유효 기간이 있으며, 유효 기간이 지난 쿠키는 자동으로 삭제됩니다.

 

쿠키 설정하기

• 쿠키를 설정하려면 document.cookie 속성을 사용합니다. 이 속성은 현재 페이지의 모든 쿠키를 포함하는 문자열을 반환하며, 이 문자열을 편집하여 새로운 쿠키를 추가하거나 수정할 수 있습니다.

document.cookie = "key=value; expires=expirationDate; path=pathName";

1. key와 value: 각각 쿠키의 이름과 값
2. expirationDate: 쿠키의 만료 날짜, 이 값을 설정하지 않으면 브라우저가 종료될 때 쿠키가 자동으로 삭제됨
3. pathName: 쿠키가 적용되는 경로, 이 값을 설정하지 않으면 기본값인 현재 페이지 경로가 사용됩니다.

 

• 예를 들어, username이라는 이름의 쿠키를 설정하고 유효 기간을 1일로 설정하려면 다음과 같이 작성할 수 있습니다.

var now = new Date();
var expirationDate = new Date(now.getTime() + 24 * 60 * 60 * 1000); // 1일 후
document.cookie = "username=John Doe; expires=" + expirationDate.toUTCString() + "; path=/";

 

쿠키 가져오기

• 쿠키를 가져오려면 document.cookie 속성을 사용합니다. 이 속성은 현재 페이지의 모든 쿠키를 포함하는 문자열을 반환합니다. 이 문자열을 쉽게 처리하려면 split() 함수를 사용하여 개별 쿠키를 분리할 수 있습니다.

// split() 함수는 쿠키 문자열을 세미콜론(;)으로 분리하여 배열로 반환
var cookies = document.cookie.split(';');


for (var i = 0; i < cookies.length; i++) {
  
  // trim() 함수는 각 쿠키 문자열의 앞뒤 공백을 제거
  var cookie = cookies[i].trim();
  if (cookie.startsWith("username=")) {
  
    // startsWith() 함수와 substring() 함수를 사용하여 username이라는 이름을 가진 쿠키의 값 조회
    var username = cookie.substring("username=".length, cookie.length);
    console.log("username: " + username);
  }
}

 

• 하지만 이 방법은 쿠키가 많아지면 처리 속도가 느려질 수 있습니다. 
  따라서 document.cookie 속성을 직접 분석하는 대신, document.cookie 속성에 대한 접근을 캡슐화하는 함수를 작성하는 것이 좋습니다.

function getCookie(name) {
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    if (cookie.startsWith(name + "=")) {
      return cookie.substring(name.length + 1, cookie.length);
    }
  }
  return "";
}

var username = getCookie("username");
console.log("username: " + username);

• 위의 코드에서는 getCookie() 함수를 작성하여 쿠키를 가져오는 작업을 캡슐화했습니다. 이 함수는 쿠키 이름을 매개변수로 받아 해당하는 쿠키 값을 반환합니다. 만약 해당하는 쿠키가 없다면 빈 문자열을 반환합니다.

 

참고 사항

• JavaScript를 사용하여 쿠키를 설정하거나 가져올 때는 보안상의 이유로 주의해야 합니다. 쿠키에는 민감한 정보가 포함될 수 있기 때문에, 반드시 안전하게 처리해야 합니다.
  
  
• 또한, 쿠키는 브라우저의 설정에 따라 사용할 수 없을 수도 있습니다. 사용자가 쿠키 사용을 거부하는 경우, JavaScript로 쿠키를 설정하거나 가져올 수 없습니다. 
  이 경우, 대안적인 방법으로는 웹 스토리지(localStorage 또는 sessionStorage)를 사용하는 것이 좋습니다.