참조 및 번역: http://www.w3schools.com/js/js_cookies.asp

쿠키란 무엇인가?

쿠키는 방문자의 컴퓨터에 정되는 변수다. 매번 컴퓨터가 브라우저에 페이지를 요청할 때 쿠키도 같이 보낸다. 자바스크립트를 사용하면, 쿠키의 값을 가져오거나 새로운 쿠키를 만들 수 있다.

쿠키 예제:

    * 이름 쿠키 - 방문자가 처음으로 여러분의 웹 페이지를 방문 했을 때 그들은 그들의 이름을 적을 것입니다. 이 이름을 쿠키에 저장합니다. 다음에 방문자가 다시 여러분의 페이지를 방문하면 저장되어 있는 쿠키에서 이름을 가져와서 그들에게 "Welcome 기선!" 환영 문구를 보여줄 수 있습니다.
    * Password 쿠키 - 방문자가 웹 페이지에 처음 방문하면, 그들은 패스워드를 입력합니다. 이 패스워드를 쿠키에 저장합니다. 다음번에 방문자가 다시 웹 페이지를 들리게 되면 쿠키에서 패스워드를 가져와서 자동으로 채워줍니다
    * 날짜 쿠키 - 방문자가 처음 웹 페이지를 방문하면, 현재 날짜를 쿠키에 저장합니다. 다음 번에 방문자가 다시 웹 페이지를 찾아오면, 쿠키로 부터 날짜를 가져와서 "지난 번에는 2007년 7월 9일에 접속했었군요" 라고 보여줄 수 있다.

쿠키 만들고 저장하기

이 예제에서 우리는 쿠키를 만들어서 방문자의 이름을 저장하겠습니다. 처음으로 방문자가 웹 페이지를 방문하면, 그들에게 이름을 입력하도록 요구합니다. 그런다음 이 이름을 쿠키에 저장합니다. 다음번에 같은 페이지를 다시 방문하면 그들에게 환영 문구를 출력합니다.

먼저, 방문자의 이름을 쿠키 변수에 저장하는 함수를 작성합니다:

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 객체를 사용하여 쿠키의 이름과 소멸될 날짜를 저장합니다.

Then, we create another function that checks if the cookie has been set:
쿠키가 설정되어 있는지 확인하는 다른 함수를 작성합니다.

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가 비어 있지 않다면 찾고자 하는 이름의 쿠키가 저장되어 있는지 확인합니다. 만약 쿠키를 찾으면 쿠키의 값을 반환하고 그렇지 않다면 비어있는 문자열을 반환합니다.

마지막으로, 쿠키가 설정되어 있으면 환명 문구를 보내고, 쿠키가 설정되어 있지 않으면 prompt 박스를 출력하여 사용자의 이름을 물어보는 함수를 작성합니다.

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}