JavaScript에서 브라우저에 저장된 모든 쿠키를 이름별로 나열하려면 document.cookie 속성으로 전체 쿠키 문자열을 가져온 뒤, 세미콜론(;)을 기준으로 분할하여 배열에 담습니다. 그 다음 각 배열 요소에서 등호(=)를 기준으로 키(key)와 값(value)을 분리해 추출하면 됩니다.
즉, 처리 순서는 다음과 같습니다.
document.cookie로 전체 쿠키 문자열을 읽어옵니다.split(';')메서드로 쿠키 쌍들을 배열로 만듭니다.- 반복문을 돌며 각 항목을
split('=')으로 나눠 키와 값을 얻습니다.
예제
아래 코드를 실행하고 버튼을 클릭하면 현재 문서에 저장된 모든 쿠키가 이름과 값 형태로 출력됩니다.
<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>
참고: 쿠키 값 자체에 등호(=)가 포함될 수 있으므로, 실무에서는 indexOf('=')와 substring() 또는 정규표현식을 활용해 첫 번째 등호만 기준으로 분리하는 것이 더 안전합니다. 또한 최신 프로젝트에서는 document.write 대신 console.log나 DOM 조작 방식으로 결과를 출력하는 것이 권장됩니다.