JavaScript 쿠키
쿠키는 사용자를 식별하는 데 사용됩니다.
<html> <mate chatset="utf-8"> <head> <script type="text/javascript"> function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1) { c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } } return "" } function setCookie(c_name,value,expiredays) { var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : "; expires="+exdate.toGMTString()) } function checkCookie() { username=getCookie('username') if (username!=null && username!="") {alert('Welcome again '+username+'!')} else { username=prompt('请输入姓名:',"") if (username!=null && username!="") { setCookie('username',username,365) } } } </script> </head> <body onLoad="checkCookie()"> </body> </html>
쿠키란 무엇인가요?
쿠키는 방문자의 컴퓨터에 저장되는 변수입니다. 이 쿠키는 동일한 컴퓨터가 브라우저를 통해 페이지를 요청할 때마다 전송됩니다. JavaScript를 사용하여 쿠키 값을 생성하고 검색할 수 있습니다.
쿠키의 예:
이름 쿠키 방문자가 처음으로 페이지를 방문할 때 이름을 입력할 수 있습니다. 이름은 쿠키에 저장됩니다. 방문자가 사이트를 다시 방문하면 "Welcome John Doe!"와 같은 환영 메시지를 받게 됩니다. 이름은 쿠키에서 검색됩니다. 비밀번호 쿠키 방문자가 처음으로 페이지를 방문할 때 비밀번호를 입력할 수 있습니다. 비밀번호는 쿠키에도 저장될 수 있습니다. 해당 사이트를 다시 방문하면 쿠키에서 비밀번호를 검색합니다. 날짜 쿠키 방문자가 귀하의 웹사이트를 처음 방문할 때 현재 날짜가 쿠키에 저장될 수 있습니다. 사이트를 다시 방문하면 "마지막 방문일은 2005년 8월 11일 화요일입니다!"와 유사한 메시지를 받게 됩니다. 날짜는 쿠키에서도 검색됩니다.
쿠키 생성 및 저장
이 예에서는 방문자의 이름을 저장하는 쿠키를 생성하겠습니다. 방문자가 사이트를 처음 방문하면 이름을 입력하라는 메시지가 표시됩니다. 이름은 쿠키에 저장됩니다. 방문자가 웹사이트를 다시 방문하면 환영 메시지를 받게 됩니다.
먼저 쿠키 변수에 방문자의 이름을 저장할 수 있는 함수를 만듭니다.
function setCookie(c_name,value,expiredays) { var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) }
위 함수의 매개변수는 쿠키의 이름, 값, 만료 날짜를 저장합니다.
위 함수에서는 먼저 일수를 유효한 날짜로 변환한 다음 쿠키 이름, 값 및 만료 날짜를 document.cookie 객체에 저장합니다.
그 후에 쿠키가 설정되었는지 확인하는 또 다른 함수를 만들어야 합니다.
function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1) { c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } } return "" }
위 함수는 먼저 document.cookie 개체에 쿠키가 있는지 확인합니다. document.cookie 객체가 특정 쿠키를 저장하는 경우, 우리가 지정한 쿠키가 저장되었는지 계속 확인합니다. 원하는 쿠키가 발견되면 값이 반환되고, 그렇지 않으면 빈 문자열이 반환됩니다.
마지막으로 이 함수의 기능은 다음과 같습니다. 쿠키가 설정된 경우 환영 메시지를 표시하고, 그렇지 않으면 사용자에게 이름을 입력하라는 프롬프트 상자를 표시합니다.
function checkCookie() { username=getCookie('username') if (username!=null && username!="") {alert('Welcome again '+username+'!')} else { username=prompt('请输入姓名:',"") if (username!=null && username!="") { setCookie('username',username,365) } } }
모든 코드는 다음과 같습니다.
<html> <head> <script type="text/javascript"> function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1) { c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } } return "" } function setCookie(c_name,value,expiredays) { var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) } function checkCookie() { username=getCookie('username') if (username!=null && username!="") {alert('Welcome again '+username+'!')} else { username=prompt('请输入姓名:',"") if (username!=null && username!="") { setCookie('username',username,365) } } } </script> </head> <body onLoad="checkCookie()"> </body> </html>