JavaScript에서는 document.cookie 속성을 사용하면 쿠키에 아주 간단하게 접근하고 값을 읽어올 수 있습니다. document.cookie 객체의 값 자체가 곧 쿠키이기 때문에, 쿠키를 읽는 작업은 쿠키를 생성(쓰기)하는 것만큼이나 쉽습니다.
document.cookie 문자열의 구조
document.cookie가 반환하는 문자열은 세미콜론(;)으로 구분된 name=value 쌍들의 목록 형태를 가집니다. 여기서 name은 쿠키의 이름을, value는 해당 쿠키의 문자열 값을 의미합니다.
예를 들어 쿠키가 두 개 저장되어 있다면 다음과 같은 형태로 반환됩니다.
username=JohnDoe; theme=dark예제: document 객체로 쿠키 읽기
다음 예제 코드를 실행하면 JavaScript의 document 객체를 이용해 쿠키에 접근하고, 전체 쿠키 문자열을 세미콜론 단위로 분리한 뒤 각 쿠키의 이름과 값을 출력하는 과정을 확인할 수 있습니다.
<html>
<head>
<script>
<!--
function ReadCookie() {
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
// 모든 쿠키 쌍을 배열로 가져오기
cookiearray = allcookies.split(';');
// 배열에서 키-값 쌍 추출하기
for(var i=0; i<cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write ("Key is : " + name + " and Value is : " + value);
}
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
<p>아래 버튼을 클릭하고 결과를 확인해 보세요:</p>
<input type="button" value="Get Cookie" onclick="ReadCookie()"/>
</form>
</body>
</html>
코드 동작 방식
- 전체 쿠키 문자열 가져오기: document.cookie를 호출하면 현재 문서에 저장된 모든 쿠키가 하나의 문자열로 반환됩니다.
- 문자열 분리: split(';') 메서드를 사용해 세미콜론을 기준으로 문자열을 나누어 각 쿠키를 배열 요소로 만듭니다.
- 이름과 값 추출: 반복문 안에서 split('=')을 사용해 각 쿠키 항목을 이름(name)과 값(value)으로 분리한 후 화면에 출력합니다.
참고로 실무 환경에서는 쿠키 값에 공백이나 특수문자가 포함될 수 있으므로, trim() 메서드로 앞뒤 공백을 제거하거나 decodeURIComponent()로 값을 디코딩해서 사용하는 것이 안전합니다.