JavaScript에서 특정 이름을 가진 쿠키(named cookie)를 설정하려면 document.cookie 속성을 사용하면 됩니다. 쿠키는 '이름=값' 형태의 문자열로 저장되며, 아래 예제는 사용자가 입력한 고객 이름을 쿠키로 저장하는 과정을 보여줍니다.
예제 코드
아래 데모에서는 입력 필드에 이름을 입력하고 'Set Cookie' 버튼을 클릭하면, 해당 값이 'name'이라는 이름의 쿠키로 설정됩니다.
<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;
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>
코드 동작 원리
이 코드의 핵심 로직은 다음과 같습니다.
1. 유효성 검사: 입력 필드가 비어 있는지 먼저 확인합니다. 값이 없으면 alert 창으로 경고 메시지를 표시하고 함수를 종료합니다.
2. 값 인코딩: escape() 함수를 사용해 사용자가 입력한 값을 인코딩합니다. 이는 쿠키 값에 포함될 수 있는 특수문자나 공백이 문제를 일으키지 않도록 하기 위함입니다.
3. 쿠키 설정: document.cookie = "name=" + cookievalue; 구문으로 'name'이라는 키에 고객 이름 값을 담아 쿠키를 생성합니다.
4. 결과 확인: document.write()를 통해 설정된 쿠키 내용을 화면에 출력하여 정상적으로 저장되었는지 확인할 수 있습니다.
참고로, 최신 JavaScript 환경에서는 escape() 대신 encodeURIComponent()를 사용하는 것이 권장됩니다. 또한 쿠키에 만료 시간을 지정하려면 '; expires=' 옵션을, 경로를 지정하려면 '; path=' 옵션을 함께 추가하면 됩니다.