JavaScript에서 document.cookie 속성과 split() 메서드를 활용하면 현재 도메인에 저장된 모든 쿠키를 한 번에 삭제할 수 있습니다.
쿠키는 개별적으로 삭제하는 API가 제공되지 않기 때문에, 먼저 document.cookie로 전체 쿠키 문자열을 가져온 뒤 세미콜론(;) 기준으로 분리하고, 각 쿠키의 만료 날짜를 과거 시점으로 설정하여 제거합니다.
쿠키 삭제 원리
- 전체 쿠키 조회:
document.cookie는 '이름=값' 형태의 쿠키들을 세미콜론으로 구분한 하나의 문자열로 반환합니다. - 쿠키 분리:
split(";")메서드를 사용해 문자열을 개별 쿠키 배열로 나눕니다. - 만료 처리: 각 쿠키의 이름(key)을 추출한 후, 만료 날짜를 1970년 1월 1일로 설정하면 해당 쿠키가 즉시 삭제됩니다.
전체 예제 코드
아래 예제는 쿠키 추가, 목록 조회, 전체 삭제 기능을 버튼으로 테스트할 수 있는 완전한 HTML 코드입니다.
<!DOCTYPE html>
<html>
<head>
<script>
var num = 1;
// 쿠키 추가
function addCookie(){
document.cookie = num + " = " + num;
num++;
}
// 쿠키 목록 조회
function listCookies(){
var result = document.cookie;
document.getElementById("list").innerHTML = result;
}
// 모든 쿠키 삭제
function removeCookies() {
var res = document.cookie;
var multiple = res.split(";");
for(var i = 0; i < multiple.length; i++) {
var key = multiple[i].split("=");
document.cookie = key[0] + " =; expires = Thu, 01 Jan 1970 00:00:00 UTC";
}
}
</script>
</head>
<body>
<button onclick='addCookie()'>추가</button><br>
<button onclick='listCookies()'>쿠키 목록 보기</button><br>
<button onclick='removeCookies()'>전체 삭제</button>
<h2>쿠키 목록</h2>
<p id="list"></p>
</body>
</html>주요 포인트 정리
- JavaScript로는 자신이 생성한 경로와 도메인의 쿠키만 삭제할 수 있습니다. HttpOnly 속성이 설정된 쿠키나 다른 도메인의 쿠키는 접근 자체가 불가능합니다.
- 쿠키를 설정할 때
path=/를 함께 지정했다면, 삭제할 때도 동일한 path를 지정해야 정상적으로 제거됩니다. - 버튼 순서대로 '추가' → '쿠키 목록 보기' → '전체 삭제'를 실행하면 동작을 직접 확인할 수 있습니다.