웹 애플리케이션에서 쿠키는 사용자의 로그인 상태, 개인화된 환경 설정 등을 저장하기 위해 주로 사용됩니다. 쿠키는 클라이언트(브라우저)에 저장되는 작은 정보 조각으로, 서버와의 상호작용을 유지하고 필요한 정보를 전송하는 데 사용됩니다. 이번 포스트에서는 BOM(Browser Object Model)을 사용하여 쿠키를 관리하는 방법에 대해 알아보겠습니다.

1. 쿠키 생성하기

쿠키를 생성하려면 document.cookie 속성을 사용합니다. 다음은 쿠키를 생성하는 간단한 예시입니다.

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";

위 코드는 username이라는 이름의 쿠키를 생성하고, 값은 “John Doe”로 설정합니다. expires 속성을 사용하여 쿠키의 만료일을 설정할 수 있으며, path 속성을 사용하여 쿠키의 범위를 제한할 수 있습니다.

2. 쿠키 읽기

생성한 쿠키를 읽으려면 document.cookie를 사용합니다. 다음은 쿠키를 읽는 예시입니다.

const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
  const cookie = cookies[i].trim();
  if (cookie.startsWith("username=")) {
    const username = cookie.substring("username=".length, cookie.length);
    console.log("Username:", username);
  }
}

위 코드는 모든 쿠키를 ;로 구분하여 배열로 나눈 뒤, 각 쿠키를 조사하여 “username”이라는 이름의 쿠키를 찾고 값을 출력합니다.

3. 쿠키 삭제하기

삭제하려는 쿠키를 만료일을 이전으로 설정하여 삭제할 수 있습니다. 예를 들어, 다음과 같이 삭제할 수 있습니다.

document.cookie = "username=John Doe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

위 코드는 “username”이라는 쿠키의 만료일을 1970년 1월 1일로 설정하여 삭제합니다.

결론

BOM을 사용하여 쿠키를 생성, 읽기, 삭제하는 방법에 대해 알아보았습니다. 쿠키를 효과적으로 활용하여 웹 애플리케이션의 사용자 경험을 개선할 수 있습니다. 쿠키 사용에는 개인정보 보호와 관련된 주의사항이 있으므로, 쿠키 사용에 대한 정책을 구체적으로 설정해야 합니다.

추가로 관련한 자세한 내용은 다음 링크를 참조하세요:

• MDN 쿠키 문서
• 쿠키 정책과 개인정보 보호 가이드라인