쿠키를 생성할 때는 "path" 매개변수를 활용할 수 있습니다. 이 매개변수는 쿠키가 설정되는 디렉터리 또는 웹 페이지의 경로를 지정하는 역할을 합니다. 현재 페이지에서 쿠키를 조회하고 싶다면 이 값을 비워두어도 무방하며, 기본적으로 쿠키는 현재 페이지에 귀속됩니다.
document.cookie 속성 이해하기
JavaScript에서는 document.cookie 속성을 통해 현재 문서에 속한 모든 쿠키에 접근할 수 있습니다. 이 속성은 각 쿠키를 세미콜론(;)으로 구분한 하나의 문자열로 반환하기 때문에, 이를 적절히 파싱하여 개별 쿠키의 이름과 값을 추출해야 합니다.
예제
현재 페이지의 모든 쿠키를 나열하려면 다음 코드를 실행해 보세요.
라이브 데모
<html>
<head>
<script>
function ReadCookie() {
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
// 모든 쿠키 쌍을 배열로 분리
cookiearray = allcookies.split(';');
// 배열에서 키(key)와 값(value)을 추출
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>
코드 동작 방식
위 코드의 핵심 로직은 다음과 같습니다.
1. document.cookie로 전체 쿠키 문자열을 가져옵니다.
2. split(';') 메서드를 사용해 세미콜론을 기준으로 개별 쿠키로 분리합니다.
3. 반복문을 돌면서 등호(=)를 기준으로 쿠키 이름과 값을 나누어 출력합니다.
버튼을 클릭하면 ReadCookie() 함수가 호출되어, 현재 페이지에 저장된 모든 쿠키의 키와 값이 화면에 표시됩니다.