[JavaScript]쿠키(Cookie) 사용 방법

쿠키(Cookie)란?

HTTP는 웹에서 이루어지는 모든 데이터를 주고받기 위한 서버-클라이언트 모델을 따르는 프로토콜입니다. HTTP의 특징 중 하나로 "상태 비저장(stateless)"이 있는데, 이 특징은 세션과 같은 사용자 정보를 저장 또는 유지하지 않는다는 것입니다.

 

이러한 단점을 해결하기 위해 웹 브라우저는 쿠키라는 것을 사용합니다. 쿠키는 소량의 특정 데이터를 기억하기 위해 저장하는 데이터로 사용자 컴퓨터에 저장됩니다.

 

쿠키의 특징

• 웹 브라우저(IE, Chrome, Firefox등...)마다 쿠키가 저장되는 위치가 다릅니다.
• 쿠키는 이름-값 쌍의 형태의 정보를 문자열로 저장합니다.
• 사용자의 웹 브라우저가 쿠키를 읽어서 사용자 정보 같은 데이터를 식별합니다.

쿠키의 단점

• 보유할 수 있는 데이터의 양이 제한되어 있습니다.
• 웹에 능숙한 사용자는 개발자 도구로 쿠키를 읽거나 편집할 수 있습니다.

JavaScript에서 document.cookie 속성을 사용하여 쿠키를 생성, 읽기, 업데이트 및 삭제할 수 있으며 네 가지 작업을 일반적으로 CRUD라고 부릅니다.

 

이번 포스팅에서는 JavaScript에서 쿠키를 사용하는 방법을 설명합니다.

 

목차

1. 쿠키 생성
2. 쿠키 값 변경
3. 쿠키 구성 요소
4. 쿠키 값 읽기
5. 쿠키 삭제

---

쿠키 생성

쿠키는 이름-값 쌍의 형태이므로 쿠키를 생성하기 위해서는 이름과 값이 필요합니다.

 

다음은 이름이 color이며 값이 red인 쿠키를 생성하는 예제입니다.

document.cookie = "color=red";

= 좌측에 이름을 입력하고 우측에 값을 입력합니다.

 

다음은 여러 쿠키를 생성하는 예제입니다.

document.cookie = "color1=blue";
document.cookie = "color2=yellow";
document.cookie = "color3=white";

document.cookie는 일반 객체와 다릅니다. 접근자 속성입니다. 새로운 쿠키가 기존 쿠키를 덮어쓰지 않습니다.

---

쿠키 값 변경

쿠키 값을 변경하는 경우 = 좌측에 이름을 입력하고 우측에 변경하고자 하는 값을 입력합니다.

 

다음은 이름이 color이며 값이 red인 쿠키의 값을 black으로 변경하는 예제입니다.

document.cookie = "color=black";

반응형

---

쿠키 구성 요소

쿠키는 이름과 값 이외에도 쿠키 만료 시간, 경로 등을 정의할 수 있습니다. 쿠키 값 뒤에 세미콜론(;)을 사용하여 쿠키 구성 요소를 설정합니다.

 

구성 요소 목록

• expires: 쿠키 만료 날짜를 설정하며, 설정하지 않으면 브라우저를 닫을 때 쿠키가 만료됩니다.
• max-age: 쿠키가 생성된 시간부터 시작하여 만료되어야 하는 시간(초)을 설정합니다.
• path: 쿠키에 접근할 수 있는 절대 경로를 설정합니다.
• secure: 쿠키가 https를 통해서만 전송됩니다.
• samesite: 쿠키가 다른 웹 사이트에 전송되지 않도록 합니다.

 

다음은 expires를 설정하여 현재 날짜로부터 1시간 후에 만료되는 쿠키 예제입니다.

var date = new Date();
date.setMinutes(date.getMinutes() + 60);
document.cookie = `color=black; expires=${date.toUTCString()}`;

 

다음은 여러 구성 요소를 설정한 예제입니다.

var date = new Date();
date.setMinutes(date.getMinutes() + 60);
document.cookie = `color=black; expires=${date.toUTCString()}; secure`;

---

쿠키 값 읽기

쿠키 값을 가져오는 방법은 생각만큼 간단하지 않으며 정규식을 사용하여 특정 값만 가져오도록 합니다.

const getCookieValue = (name) => (
  document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || ''
)

var value = getCookie("color");

---

쿠키 삭제

쿠키를 삭제하기 위해서는 쿠키의 구성 요소에서 expires를 오늘 이전으로 설정하거나 max-age를 0으로 설정합니다.

document.cookie = `color=black;max-age=${"0"}`;