JavaScript로 홈페이지 전용 쿠키 설정하기
웹사이트를 개발하다 보면 사이트 전체가 아닌 특정 페이지에서만 유효한 쿠키를 설정해야 하는 경우가 있습니다. 이럴 때는 JavaScript로 현재 페이지의 경로를 확인한 뒤, 조건에 맞는 페이지일 때만 document.cookie 속성을 사용해 쿠키를 생성하면 됩니다.
동작 원리
window.location.pathname을 사용하면 현재 문서의 경로를 알아낼 수 있습니다. 이 경로를 슬래시(/) 기준으로 나누어 마지막 요소가 목표 파일명(예: home.html)과 일치하는지 검사하고, 일치하는 경우에만 쿠키를 저장하는 방식입니다.
예제 코드
아래 예제는 사용자 이름을 입력받은 후, 현재 페이지가 home.html일 때만 쿠키를 설정합니다. 'Set Cookie' 버튼을 클릭하면 WriteCookie() 함수가 호출됩니다.
<html>
<head>
<script>
<!--
function WriteCookie() {
if( document.myform.customer.value == "" ){
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
var myPath = window.location.pathname;
var address = myPath.split("/");
if ((address[address.length - 1]).toLowerCase() == "home.html") {
document.cookie = "name=" + cookievalue;
document.write("Setting Cookies : name =" + cookievalue);
}
}
//-->
</script>
</head>
<body>
<form name = "myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
</form>
</body>
</html>
코드 설명
- 입력값 검증: 입력 필드가 비어 있으면
alert()으로 값을 입력하도록 안내한 뒤 함수를 종료합니다. - 쿠키 값 인코딩:
escape()함수로 특수문자를 인코딩하고 세미콜론(;)을 붙여 쿠키 문자열을 만듭니다. 참고로escape()는 폐기 예정(deprecated)된 함수이므로, 최신 코드에서는encodeURIComponent()를 사용하는 것이 좋습니다. - 현재 경로 확인:
window.location.pathname으로 현재 페이지 경로를 가져온 후split("/")으로 분리합니다. - 조건부 쿠키 설정: 경로의 마지막 요소가 "home.html"과 일치하면
document.cookie에 쿠키를 저장하고 결과를 화면에 출력합니다.
path 속성을 활용한 대안
JavaScript 로직으로 페이지를 직접 판별하는 대신, 쿠키의 path 속성을 지정하면 특정 경로에서만 쿠키가 전송되도록 만들 수도 있습니다.
document.cookie = "name=" + cookievalue + "; path=/home.html";
이 방식을 사용하면 /home.html 경로에서만 해당 쿠키가 유효하게 동작하므로, 코드가 간결해지고 브라우저 차원에서 범위가 관리된다는 장점이 있습니다. 상황에 따라 두 방법 중 더 적합한 것을 선택해 사용하시면 됩니다.