쿠키 설정하기 (Set Cookie)
쿠키를 생성하는 가장 간단한 방법은 document.cookie 객체에 문자열 값을 직접 할당하는 것입니다. 기본 작성 형식은 다음과 같습니다.
document.cookie = "key1=value1;key2=value2;expires=date";
여기서 expires 속성은 선택 사항입니다. 이 속성에 유효한 날짜나 시간을 지정하면 해당 시점에 쿠키가 만료되며, 그 이후에는 쿠키 값에 더 이상 접근할 수 없습니다. expires를 지정하지 않으면 브라우저 세션이 종료될 때 쿠키가 삭제되는 세션 쿠키가 됩니다.
예제
아래 예제는 입력 필드에 입력한 고객 이름을 쿠키로 저장하는 코드입니다.
<html>
<head>
<script>
<!--
function WriteCookie() {
if( document.myform.customer.value == "" ) {
alert("값을 입력해 주세요!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write("쿠키 설정 : " + "name=" + cookievalue);
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
이름 입력: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
</form>
</body>
</html>
위 코드는 사용자가 입력한 값을 escape() 함수로 인코딩한 후 name=값 형태의 쿠키로 저장합니다. 참고로 최신 JavaScript 환경에서는 특수문자 처리를 위해 더 안전한 encodeURIComponent() 함수를 사용하는 것이 권장됩니다.
쿠키 읽기 (Get Cookie)
쿠키를 읽는 것도 설정하는 것만큼 간단합니다. document.cookie 객체의 값 자체가 곧 쿠키이기 때문입니다. 따라서 언제든지 이 문자열을 통해 쿠키에 접근할 수 있습니다. document.cookie 문자열은 세미콜론(;)으로 구분된 name=value 쌍의 목록을 담고 있으며, name은 쿠키의 이름, value는 해당 문자열 값을 의미합니다.
예제
다음 코드를 실행하면 저장된 쿠키를 읽어 화면에 출력할 수 있습니다.
<html>
<head>
<script>
<!--
function ReadCookie() {
var allcookies = document.cookie;
document.write("전체 쿠키 : " + allcookies);
// 모든 쿠키 쌍을 배열로 분리
cookiearray = allcookies.split(';');
// 배열에서 키와 값을 추출
for(var i=0; i<cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write("키 : " + name + " / 값 : " + value);
}
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
<p>아래 버튼을 클릭하면 결과를 확인할 수 있습니다:</p>
<input type="button" value="Get Cookie" onclick="ReadCookie()"/>
</form>
</body>
</html>
이 코드의 동작 순서는 다음과 같습니다. 먼저 document.cookie로 전체 쿠키 문자열을 가져온 뒤, split(';')을 사용해 개별 쿠키 쌍을 배열로 분리합니다. 그리고 각 항목을 다시 split('=')으로 나누어 쿠키 이름과 값을 추출해 출력합니다.
추가 팁
실무에서는 쿠키에 유효 기간뿐 아니라 path(유효 경로), domain(적용 도메인), secure(HTTPS 전용) 같은 속성을 함께 지정하는 경우가 많습니다. 또한 쿠키 용량은 도메인당 약 4KB로 제한되므로, 대용량 데이터는 localStorage나 sessionStorage 같은 웹 스토리지 API를 사용하는 것이 좋습니다.