JavaScript에서 쿠키를 삭제하는 핵심 원리는 간단합니다. 쿠키의 만료 날짜(expiration date)를 과거 시점으로 설정하면 브라우저가 해당 쿠키를 자동으로 제거합니다.
쿠키 삭제의 기본 원리
JavaScript는 document.cookie 속성을 통해 쿠키에 접근할 수 있습니다. 쿠키를 생성할 때와 마찬가지로, 삭제할 때도 동일한 이름으로 쿠키를 다시 설정하되 expires 옵션에 이미 지난 날짜를 지정하면 됩니다. 그러면 브라우저는 해당 쿠키가 만료되었다고 판단하여 저장소에서 즉시 삭제합니다.
예제 코드
아래 예제는 사용자 이름을 입력받아 쿠키를 생성하고, 만료일을 한 달 전으로 설정하여 쿠키를 삭제하는 방법을 보여줍니다.
<html>
<head>
<script>
<!--
function WriteCookie() {
var now = new Date();
// 현재 시간에서 한 달을 빼아 과거 시점으로 설정
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie="name=" + cookievalue;
// 만료일을 과거로 지정하여 쿠키 삭제
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>코드 설명
1. 과거 날짜 생성
new Date()로 현재 시간을 가져온 후, setMonth(now.getMonth() - 1)을 사용해 한 달 전의 시점으로 되돌립니다. 이렇게 만든 과거 날짜가 곧 쿠키의 만료일이 됩니다.
2. 쿠키 값 준비
입력 필드에서 가져온 값을 escape() 함수로 인코딩합니다. 이는 특수문자나 공백이 쿠키 문자열을 깨뜨리지 않도록 하기 위함입니다.
3. 만료일과 함께 쿠키 재설정
document.cookie에 쿠키 이름과 함께 expires 속성을 과거 시각(now.toUTCString())으로 지정하여 설정합니다. 브라우저는 이 쿠키가 이미 만료되었음을 감지하고 삭제 처리합니다.
참고 사항
- 쿠키를 정확히 삭제하려면 생성 시 사용했던 것과 동일한 경로(path)와 도메인(domain)을 지정해야 합니다.
HttpOnly플래그가 설정된 쿠키는 JavaScript로 접근하거나 삭제할 수 없습니다.- 여러 개의 쿠키를 모두 지우려면
document.cookie를 파싱하여 각 쿠키마다 위 방식을 반복 적용하면 됩니다.