웹 개발에서 쿠키(cookie)는 사용자 정보나 설정값을 브라우저에 저장하고 필요할 때 다시 불러오는 데 사용되는 핵심 기술입니다. JavaScript에서는 document.cookie 속성 하나만으로 쿠키를 간단하게 읽고 쓸 수 있습니다.
JavaScript로 쿠키 읽기 예제
다음은 버튼을 클릭하면 현재 저장된 쿠키 값을 화면에 출력하는 전체 코드입니다.
참고: 이 예제를 정상적으로 실행하려면 로컬 서버 환경이 필요합니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet
}
</style>
</head>
<body>
<h1>Read a cookie using JavaScript</h1>
<div class="result"></div>
<button class="Btn">Click here</button>
<h3>Click on the above button to read the cookie</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
document.cookie = "Name=Rohan Sharma";
BtnEle.addEventListener("click", () => {
resEle.innerHTML = document.cookie;
});
</script>
</body>
</html>
실행 결과
페이지를 처음 열면 다음과 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 아래 그림처럼 저장된 쿠키 값이 결과 영역에 표시됩니다.
코드 동작 원리
이 예제의 핵심 흐름은 다음과 같습니다.
1. 쿠키 생성: document.cookie = "Name=Rohan Sharma"; 코드를 통해 'Name'이라는 키에 'Rohan Sharma'라는 값을 가진 쿠키가 브라우저에 저장됩니다.
2. 이벤트 등록: addEventListener("click", ...)를 사용해 버튼 클릭 시 실행될 함수를 등록합니다.
3. 쿠키 읽기: 버튼을 클릭하면 document.cookie를 호출하여 현재 페이지에 저장된 모든 쿠키를 문자열 형태로 가져온 뒤, 결과 영역(.result)에 출력합니다.
알아두면 좋은 점
document.cookie는 여러 개의 쿠키를 세미콜론(;)으로 구분된 하나의 문자열로 반환합니다. 따라서 특정 쿠키만 필요하다면 문자열을 분리(split)하여 원하는 키-값 쌍을 찾는 추가 처리가 필요합니다. 또한 쿠키에는 만료 날짜(expires), 경로(path), 보안 속성(secure) 등을 함께 지정할 수 있으므로 실무에서는 이러한 옵션도 함께 고려하는 것이 좋습니다.