자바스크립트에서 쿠키는 어떻게 저장하나요?

document.cookie = 키=값;

자바스크립트 쿠키 저장: 깊이 있는 이해와 활용

자바스크립트에서 쿠키는 웹사이트가 사용자 정보를 저장하고 추적하는 데 필수적인 도구입니다. 단순한 키-값 쌍으로 저장되는 것 이상으로, 쿠키는 다양한 옵션과 함께 활용되어 웹 경험을 개선하고 개인화하는 데 중요한 역할을 합니다. 이 글에서는 기본적인 저장 방식을 넘어, 만료일 설정, 경로 지정, 보안 강화 등 자바스크립트 쿠키 저장의 다양한 측면을 자세히 살펴보고 실제 활용 예시를 통해 이해를 돕겠습니다.

document.cookie = "키=값"; 이 간단한 구문은 쿠키 저장의 핵심입니다. 하지만 이것만으로는 쿠키의 잠재력을 충분히 활용할 수 없습니다. 쿠키의 유효기간, 접근 가능한 경로, 보안 설정 등을 지정하여 쿠키를 더욱 효과적으로 관리해야 합니다.

쿠키 옵션 활용하기

단순히 키-값 쌍만 저장하는 것 외에도, 쿠키에는 만료일, 경로, 도메인, secure 플래그, SameSite 속성 등 다양한 옵션을 추가할 수 있습니다. 이러한 옵션을 통해 쿠키의 수명, 접근 범위, 보안 수준을 제어할 수 있습니다.

• expires: 쿠키의 만료일을 설정합니다. 날짜 형식은 UTC String으로 지정해야 합니다. Date.toUTCString() 메서드를 사용하여 현재 시간으로부터 특정 시간 이후를 계산하여 설정할 수 있습니다. 만료일이 지정되지 않은 쿠키는 세션 쿠키로, 브라우저가 종료되면 삭제됩니다.
• path: 쿠키가 접근 가능한 경로를 지정합니다. 기본값은 현재 경로입니다. /로 설정하면 웹사이트 전체에서 쿠키에 접근할 수 있습니다. 특정 경로(/user)로 설정하면 해당 경로 및 하위 경로에서만 쿠키를 사용할 수 있습니다.
• domain: 쿠키가 유효한 도메인을 지정합니다. 기본값은 현재 도메인입니다. 서브도메인을 포함하여 쿠키를 공유하려면 domain=.example.com과 같이 설정합니다.
• secure: HTTPS 연결에서만 쿠키를 전송하도록 지정합니다. 보안을 강화하기 위해 민감한 정보를 저장하는 쿠키에는 반드시 secure 플래그를 설정해야 합니다.
• SameSite: Cross-Site Request Forgery (CSRF) 공격을 방지하는 데 사용됩니다. Strict, Lax, None 세 가지 값을 가질 수 있습니다. Strict는 같은 사이트에서만 쿠키를 전송하고, Lax는 GET 요청과 같은 안전한 요청에서 다른 사이트에서도 쿠키를 전송하며, None은 모든 요청에서 쿠키를 전송합니다. secure 속성과 함께 사용해야 효과적입니다.

쿠키 설정 예시

다음은 다양한 옵션을 사용하여 쿠키를 설정하는 예시입니다.

// 7일 후 만료되는 쿠키 설정
const expiresDate = new Date();
expiresDate.setTime(expiresDate.getTime() + 7 * 24 * 60 * 60 * 1000); // 7일 추가

document.cookie = `username=John Doe; expires=${expiresDate.toUTCString()}; path=/; secure; SameSite=Lax`;

// 세션 쿠키 설정 (브라우저 종료 시 삭제)
document.cookie = "sessionID=12345; path=/";

// 특정 경로에만 적용되는 쿠키 설정
document.cookie = "preference=dark; path=/settings";

쿠키 활용: 다크 모드 설정 저장

위의 예시처럼, 쿠키를 사용하여 사용자의 웹사이트 설정을 저장할 수 있습니다. 예를 들어, 사용자가 다크 모드를 활성화하면 preference=dark 쿠키를 설정하고, 웹사이트에 접속할 때마다 해당 쿠키 값을 확인하여 다크 모드를 적용할 수 있습니다.

마무리

자바스크립트 쿠키는 웹 개발에서 사용자 경험을 개선하는 데 중요한 역할을 합니다. 단순한 키-값 저장을 넘어, 다양한 옵션을 활용하여 쿠키의 수명, 접근 범위, 보안 수준을 세밀하게 제어할 수 있습니다. 쿠키의 다양한 기능을 이해하고 적절히 활용하면 더욱 효과적이고 안전한 웹 애플리케이션을 개발할 수 있습니다. 하지만, 사용자 개인정보 보호를 위해 쿠키 사용 정책을 명확히 명시하고, 민감한 정보는 안전하게 저장 및 관리해야 한다는 점을 명심해야 합니다.

#웹 개발 #자바스크립트 #쿠키 저장