웹 개발을 하다 보면 사이트 전체가 아닌 특정 페이지에만 쿠키를 설정해야 하는 경우가 있습니다. 이럴 때는 자바스크립트의 window.location.pathname 속성을 활용하면 됩니다.
window.location.pathname이란?
window.location.pathname 속성은 현재 페이지의 경로(path)와 파일명을 반환합니다. 예를 들어 브라우저 주소가 https://example.com/products/item.html이라면, 이 속성은 /products/item.html을 반환합니다.
쿠키를 설정할 때 path 속성에 이 값을 지정하면, 해당 쿠키는 오직 그 경로의 페이지에서만 유효하게 됩니다. 즉, 다른 페이지에서는 이 쿠키에 접근할 수 없습니다.
예제 코드
아래 예제는 사용자가 이름을 입력하고 버튼을 클릭하면, 현재 페이지에만 적용되는 쿠키를 생성하는 코드입니다. 직접 실행해 보면서 동작을 확인해 볼 수 있습니다.
<html>
<head>
<script>
<!--
function WriteCookie() {
if( document.myform.customer.value == "" ) {
alert("값을 입력해 주세요!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
var myPath = window.location.pathname;
document.cookie = "name=" + cookievalue + ";path=" + myPath;
document.write("쿠키 설정 : " + "name=" + cookievalue);
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
이름 입력: <input type="text" name="customer"/>
<input type = "button" value = "쿠키 설정" onclick = "WriteCookie();"/>
</form>
</body>
</html>코드 설명
1. 입력값 검증
WriteCookie() 함수는 먼저 입력 필드가 비어 있는지 확인합니다. 값이 없으면 경고창을 표시하고 함수를 종료합니다.
2. 현재 페이지 경로 가져오기
var myPath = window.location.pathname; 구문으로 현재 페이지의 경로를 변수에 저장합니다.
3. 쿠키 생성
document.cookie에 name=쿠키값;path=경로 형식의 문자열을 할당하여 쿠키를 생성합니다. 여기서 path에 현재 페이지의 경로를 넣었기 때문에, 이 쿠키는 해당 페이지에서만 읽고 쓸 수 있습니다.
주의할 점
path를 지정하지 않으면 기본적으로 현재 페이지가 속한 디렉터리와 그 하위 경로 전체에 쿠키가 적용됩니다.- 사이트 전체에서 쿠키를 공유하려면
path=/로 설정하면 됩니다. - 예전 코드에서 사용된
escape()함수는 현재 권장되지 않으므로, 최신 프로젝트에서는encodeURIComponent()를 사용하는 것이 좋습니다.
이처럼 window.location.pathname과 쿠키의 path 속성을 조합하면, 페이지 단위로 쿠키 유효 범위를 세밀하게 제어할 수 있습니다.