여러 페이지에서 사용 가능한 쿠키 만들기
JavaScript에서 쿠키를 설정하면 기본적으로 해당 쿠키는 현재 페이지가 속한 디렉터리와 그 하위 경로에서만 유효합니다. 따라서 사이트 전체의 여러 페이지에서 동일한 쿠키를 공유하려면 쿠키를 설정할 때 path 속성을 루트 경로인 /로 지정해야 합니다.
;path=/
이렇게 경로를 루트(/)로 설정하면 해당 쿠키는 단일 페이지에 국한되지 않고 도메인 내 모든 페이지에서 접근할 수 있는 사이트 전역 쿠키(site-wide cookie)가 됩니다.
예제 코드
아래 예제는 사용자가 이름을 입력한 후 버튼을 클릭하면, 해당 값을 저장한 쿠키를 사이트 전체 경로에 설정하는 코드입니다. 실제로 실행해 보면서 여러 페이지 간에 쿠키가 공유되는 것을 확인할 수 있습니다.
<html>
<head>
<script>
<!--
function WriteCookie() {
if( document.myform.customer.value == "" ) {
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue + "; path=/";
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>코드 설명
이 예제의 핵심 부분은 다음 한 줄입니다.
document.cookie = "name=" + cookievalue + "; path=/";
escape()함수는 입력값에 포함된 특수문자나 공백을 안전하게 인코딩하여 쿠키 값으로 저장할 수 있도록 처리합니다.document.cookie속성에 문자열을 할당하면 새로운 쿠키가 생성되거나 기존 쿠키가 갱신됩니다.- 마지막의
; path=/구문이 이 글의 핵심으로, 쿠키의 유효 범위를 사이트 루트부터 시작하는 모든 경로로 확장합니다.
이처럼 path 옵션 하나만 올바르게 지정하면 로그인 상태 유지, 사용자 환경설정 저장 등 여러 페이지에서 공통으로 필요한 정보를 손쉽게 관리할 수 있습니다.