쿠키를 활용하면 사용자의 환경 설정, 구매 내역, 커미션 정보 등 방문자 경험을 개선하거나 사이트 통계를 분석하는 데 필요한 다양한 정보를 효율적으로 저장하고 추적할 수 있습니다.
쿠키 생성의 기본 원리
JavaScript에서 쿠키를 만드는 가장 간단한 방법은 document.cookie 객체에 문자열 값을 할당하는 것입니다. 기본 형식은 다음과 같습니다.
document.cookie = "key1=value1;key2=value2;expires=date";
여기서 expires 속성은 선택 사항입니다. 이 속성에 유효한 날짜나 시간을 지정하면 쿠키가 해당 시점에 만료되며, 그 이후에는 쿠키 값에 더 이상 접근할 수 없습니다.
주의사항: 특수문자 처리
쿠키 값에는 세미콜론(;), 쉼표(,), 공백이 포함될 수 없습니다. 따라서 값을 쿠키에 저장하기 전에 JavaScript의 escape() 함수를 사용해 인코딩하는 것이 좋습니다. 이 경우 쿠키 값을 읽어올 때는 반드시 그에 대응하는 unescape() 함수를 사용해 디코딩해야 합니다.
실전 예제 코드
아래 예제는 입력 필드에 고객 이름을 받아 쿠키로 저장하는 코드입니다. 직접 실행해 보면서 동작을 확인할 수 있습니다.
<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 = "쿠키 설정" onclick = "WriteCookie();"/>
</form>
</body>
</html>코드 설명
위 코드의 동작 흐름은 다음과 같습니다.
1. 사용자가 입력 필드에 이름을 입력하고 버튼을 클릭하면 WriteCookie() 함수가 호출됩니다.
2. 입력값이 비어 있으면 경고창을 띄우고 함수를 종료합니다.
3. 입력값이 있으면 escape() 함수로 값을 인코딩한 후 세미콜론을 붙입니다.
4. document.cookie에 'name' 키와 함께 값을 할당하여 쿠키를 생성합니다.
5. 마지막으로 설정된 쿠키 내용을 화면에 출력합니다.
이처럼 document.cookie 객체만으로도 손쉽게 쿠키를 생성할 수 있으며, expires 속성을 추가하면 쿠키의 유지 기간까지 자유롭게 제어할 수 있습니다.