때로는 쿠키를 삭제하여, 이후에 해당 쿠키를 다시 읽으려고 할 때 아무런 값도 반환되지 않도록 처리해야 할 경우가 있습니다. 자바스크립트에서 쿠키를 삭제하는 방법은 의외로 간단합니다. 바로 쿠키의 만료 날짜(expiry date)를 과거 시점으로 설정하면 되는데, 이렇게 하면 브라우저가 해당 쿠키를 즉시 만료된 것으로 판단하여 자동으로 제거합니다.
쿠키 삭제의 기본 원리
쿠키는 생성 시점에 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>코드 설명
new Date()로 현재 시각을 가져온 후,setMonth(now.getMonth() - 1)를 사용해 날짜를 정확히 한 달 전으로 되돌립니다.escape()함수는 입력값에 포함될 수 있는 특수문자를 인코딩하여 쿠키 값으로 안전하게 저장할 수 있도록 합니다.toUTCString()은 만료 날짜를 쿠키 표준 형식인 UTC 문자열로 변환합니다.
주의 사항
쿠키를 성공적으로 삭제하려면, 삭제하려는 쿠키와 동일한 이름, 경로(path), 도메인(domain)을 사용해야 합니다. 쿠키 생성 시 path나 domain 옵션을 지정했다면, 삭제할 때도 반드시 같은 값을 함께 지정해야 브라우저가 올바르게 쿠키를 인식하고 제거합니다.