본문으로 건너뛰기
실습하기

쿠키(Cookies)

쿠키는 웹사이트가 사용자의 브라우저에 저장하는 작은 데이터 조각들입니다.

쿠키는 사용자가 선호하는 환경 설정을 저장하거나, 사용자가 방문한 페이지를 기록하는 등 다양한 목적으로 사용됩니다.


쿠키 주요 특징​

  • 기간 제한: 쿠키는 만료 날짜를 설정할 수 있습니다. 이 날짜가 지나면 쿠키는 자동으로 삭제됩니다.

  • 도메인 및 경로 제한: 쿠키는 특정 도메인과 경로에만 한정해 사용할 수 있습니다.

  • 보안: HttpOnly나 Secure 옵션을 사용해 쿠키의 탈취로 인한 개인 정보 노출을 방지할 수 있습니다. httpOnly는 자바스크립트가 쿠키에 접근하는 것을 막고, Secure는 HTTPS(보안 인증) 된 웹사이트에서만 쿠키를 전송하도록 합니다.


쿠키 설정하기​

JavaScript
document.cookie =
  'username=John; expires=Fri, 31 Dec 2023 12:00:00 UTC; path=/'; // 쿠키 설정

이 코드는

  • "username"이라는 이름의 쿠키를 설정하고, 그 값으로 "John"을 저장합니다: username=John;

  • 이 쿠키는 2023년 12월 31일까지 유효합니다: expires=Fri, 31 Dec 2023 12:00:00 UTC;

  • 웹사이트의 모든 페이지에서 접근 가능합니다: path=/.


쿠키에서 값 얻기​

쿠키는 document.cookie에 저장되어 있습니다. document.cookie는 쿠키를 나타내는 문자열을 반환합니다.

JavaScript
function getCookie(name) {
  const value = '; ' + document.cookie; // 쿠키 값은 세미콜론으로 구분됨
  const parts = value.split('; ' + name + '='); // 쿠키 이름을 이용해 쿠키 값을 찾음

  if (parts.length == 2) return parts.pop().split(';').shift(); // 쿠키 값 반환
}

console.log(getCookie('username')); // John

쿠키 삭제하기​

쿠키는 JavaScript로 직접 삭제할 수 없습니다. 대신, 해당 쿠키의 만료 날짜를 과거로 설정해 쿠키를 만료시킬 수 있습니다.

JavaScript
document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; // 쿠키 삭제

이렇게 설정하면 "username" 쿠키는 즉시 비활성화됩니다.

오른쪽 코드는 쿠키를 브라우저에 저장하고, 저장한 쿠키를 확인하는 예제입니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!