▶ JavaScript Browser BOM

JavaScript Cookies: 웹에서 데이터 저장 및 관리하기

JavaScript Cookies는 웹 브라우저에서 데이터를 저장하고 관리하는 방법 중 하나입니다. 쿠키는 서버가 클라이언트의 웹 브라우저에 저장할 수 있는 작은 데이터 조각으로, 사용자에 대한 정보나 세션 정보를 유지하는 데 사용됩니다. 이 가이드는 JavaScript에서 쿠키를 생성, 읽기, 삭제하는 방법을 설명합니다.

1. 쿠키란?

쿠키는 웹 서버가 클라이언트(브라우저)에 저장하는 데이터로, 사용자가 웹사이트를 방문할 때 생성됩니다. 쿠키는 특정 도메인에서 생성되고 해당 도메인에서만 사용할 수 있습니다.

1.1. 쿠키의 주요 용도

사용자 로그인 정보 유지
사용자 선호 설정 저장
웹사이트 분석 및 트래킹
장바구니 데이터 저장

2. 쿠키 생성하기

쿠키를 생성하려면 document.cookie 속성을 사용합니다. 쿠키를 설정할 때는 다음 형식을 사용합니다:

document.cookie = "key=value; expires=date; path=/; domain=example.com; secure; samesite=strict";

key=value: 저장할 쿠키의 이름과 값.
expires: 쿠키의 만료 날짜. 만료 날짜를 설정하지 않으면 세션 쿠키로 취급되어 브라우저를 종료할 때 삭제됩니다.
path: 쿠키가 유효한 경로. 기본값은 현재 경로입니다.
domain: 쿠키가 유효한 도메인.
secure: HTTPS 연결에서만 쿠키를 전송할 때 사용합니다.
samesite: CSRF 공격을 방지하기 위해 쿠키의 전송 방식을 설정합니다 (예: Lax, Strict, None).

2.1. 쿠키 생성 예시

// 현재 시간을 기준으로 1시간 후 만료되는 쿠키 생성
const now = new Date();
now.setTime(now.getTime() + 3600 * 1000);  // 1시간 후
const expires = "expires=" + now.toUTCString();

document.cookie = "username=JohnDoe; " + expires + "; path=/";  // 쿠키 생성

이 코드는 "username"이라는 이름의 쿠키를 생성하고, 1시간 후에 만료되도록 설정합니다.

3. 쿠키 읽기

쿠키를 읽으려면 document.cookie 속성을 사용하여 쿠키 문자열을 가져오고, 이를 파싱하여 원하는 쿠키 값을 추출해야 합니다.

3.1. 쿠키 읽기 예시

function getCookie(name) {
    const cookieArr = document.cookie.split(';');  // 쿠키 문자열을 분리
    for (let i = 0; i < cookieArr.length; i++) {
        const cookiePair = cookieArr[i].trim();  // 공백 제거
        // 쿠키 이름이 일치하면 쿠키 값 반환
        if (cookiePair.startsWith(name + '=')) {
            return cookiePair.split('=')[1];  // 쿠키 값 반환
        }
    }
    return null;  // 쿠키가 존재하지 않으면 null 반환
}

// 쿠키 읽기
const username = getCookie("username");
console.log("Username:", username);  // "Username: JohnDoe" 출력

이 코드는 주어진 이름의 쿠키를 찾아 해당 값을 반환하는 함수를 정의합니다.

4. 쿠키 삭제

쿠키를 삭제하려면 쿠키의 만료 날짜를 과거로 설정하면 됩니다.

4.1. 쿠키 삭제 예시

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

이 코드는 "username" 쿠키를 삭제합니다.

5. 쿠키 관련 주의사항

5.1. 크기 제한

쿠키는 도메인당 약 4KB로 크기가 제한됩니다. 또한, 각 도메인에 대해 최대 20~50개의 쿠키를 저장할 수 있습니다.

5.2. 보안

Secure: 민감한 데이터는 HTTPS를 사용하여 전송해야 하며, secure 속성을 사용하여 보안을 강화할 수 있습니다.
HttpOnly: 쿠키를 JavaScript에서 접근하지 못하도록 설정하여 XSS 공격을 방지할 수 있습니다.
SameSite: CSRF 공격을 방지하기 위해 SameSite 속성을 설정하는 것이 좋습니다.

5.3. 브라우저 호환성

쿠키는 대부분의 브라우저에서 지원되지만, 사용자가 쿠키를 비활성화한 경우에도 쿠키 기능이 작동하지 않습니다. 따라서, 쿠키 사용 시 이러한 상황을 고려해야 합니다.

요약

JavaScript Cookies는 웹 브라우저에서 데이터를 저장하고 관리하는 간단하고 효과적인 방법입니다. 이를 통해 사용자 정보를 유지하고, 웹 애플리케이션의 기능을 향상시킬 수 있습니다.

쿠키 생성: document.cookie 속성을 사용하여 쿠키를 생성합니다.
쿠키 읽기: document.cookie를 사용하여 쿠키 값을 추출합니다.
쿠키 삭제: 만료 날짜를 과거로 설정하여 쿠키를 삭제합니다.

JavaScript 쿠키를 활용하여 더 나은 사용자 경험과 효율적인 데이터 관리를 구현할 수 있습니다.

코딩 스쿨 JavaScript