JavaScript에서 document.cookie 속성을 사용하면 쿠키를 쉽게 설정할 수 있습니다. 여러 개의 쿠키를 한 번에 저장해야 하는 경우, 각 쿠키를 세미콜론(;)으로 구분하여 document.cookie에 여러 번 할당하면 됩니다.
핵심 원리
JavaScript는 document.cookie에 값을 대입할 때마다 새로운 쿠키가 추가됩니다. 기존 쿠키를 덮어쓰지 않고 누적되기 때문에, 함수를 반복 호출하는 방식으로도 여러 쿠키를 생성할 수 있습니다.
예제 코드
아래 예제는 버튼 클릭으로 쿠키를 추가하고, 전체 목록을 조회한 뒤, 모든 쿠키를 삭제하는 전체 과정을 보여줍니다.
<!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>
<h1>쿠키 목록</h1>
<p id="list"></p>
</body>
</html>코드 설명
1. addCookie() – 쿠키 추가
num 변수를 카운터로 활용하여 버튼을 클릭할 때마다 1=1, 2=2와 같은 형태의 쿠키가 순차적으로 생성됩니다.
2. listCookies() – 쿠키 목록 조회
document.cookie를 읽으면 저장된 모든 쿠키가 이름1=값1; 이름2=값2 형식의 문자열로 반환됩니다. 이 값을 화면에 그대로 출력합니다.
3. removeCookies() – 쿠키 삭제
저장된 쿠키 문자열을 세미콜론(;) 기준으로 분리한 뒤, 각 쿠키의 이름(key)을 추출합니다. 그리고 만료일을 과거 시점인 1970년 1월 1일로 설정하여 브라우저가 해당 쿠키를 즉시 삭제하도록 처리합니다.
참고 사항
쿠키 삭제 시에는 이름뿐만 아니라 경로(path)와 도메인(domain)이 일치해야 정상적으로 제거됩니다. 필요에 따라 path=/ 옵션을 함께 지정하는 것이 안전합니다. 또한 실무 환경에서는 쿠키 값에 특수문자가 포함될 수 있으므로 encodeURIComponent()로 인코딩하는 것을 권장합니다.