자바스크립트 생성 및 쿠키 저장 예시_기본지식

쿠키란 무엇인가요?
쿠키는 방문자의 컴퓨터에 저장되는 변수입니다. 이 쿠키는 동일한 컴퓨터가 브라우저를 통해 페이지를 요청할 때마다 전송됩니다. JavaScript를 사용하여 쿠키 값을 생성하고 검색할 수 있습니다.

쿠키 사용 시나리오:

쿠키 이름 지정
방문자가 페이지를 처음 방문할 때 이름을 입력할 수 있습니다. 이름은 쿠키에 저장됩니다. 방문자가 사이트를 다시 방문하면 "Welcome John Doe!"와 같은 환영 메시지를 받게 됩니다. 이름은 쿠키에서 검색됩니다.

비밀번호 쿠키
방문자가 페이지를 처음 방문할 때 비밀번호를 입력할 수 있습니다. 비밀번호는 쿠키에도 저장될 수 있습니다. 해당 사이트를 다시 방문하면 쿠키에서 비밀번호를 검색합니다.

날짜 쿠키
방문자가 귀하의 웹사이트를 처음 방문할 때 현재 날짜가 쿠키에 저장될 수 있습니다. 사이트를 다시 방문하면 "마지막 방문일은 2005년 8월 11일 화요일입니다!"와 유사한 메시지를 받게 됩니다. 날짜는 쿠키에서도 검색됩니다.

쿠키 생성 및 저장

이 예에서는 방문자의 이름을 저장하는 쿠키를 생성해 보겠습니다. 방문자가 사이트를 처음 방문하면 이름을 입력하라는 메시지가 표시됩니다. 이름은 쿠키에 저장됩니다. 방문자가 웹사이트를 다시 방문하면 환영 메시지를 받게 됩니다.

먼저 방문자의 이름을 쿠키 변수에 저장하는 함수를 만듭니다.

쿠키를 만드는 것은 실제로 문자열 철자를 쓰는 것과 같습니다.

"username=amosli;expires=Mon, 16 Dec 2013 16:20:04 GMT"
그런 다음 document.cookie=위 문자열입니다.

코드 복사 코드는 다음과 같습니다.

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate() 만료일)
document.cookie=c_name "=" escape(value)
((expiredays= =null) ? "" : ";expires=" exdate.toGMTString())
}

위 함수의 매개변수는 쿠키의 이름, 값, 만료일을 저장합니다.

위 함수에서는 먼저 일수를 유효한 날짜로 변환한 다음 쿠키 이름, 값 및 만료 날짜를 document.cookie 개체에 저장합니다.

그런 다음 쿠키가 설정되었는지 확인하는 또 다른 함수를 만들고 싶습니다.

getCookie()의 핵심은 document.cookie 한 문장이고 나머지는 문자열 처리입니다.

코드 복사 코드는 다음과 같습니다.

function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name "=")
/*
쿠키는 문자열 집합입니다: "username =amosli; __utmc=1 19627022; __utmz=119627022.1387208465.2.2.utmcsr=google|utmccn=(유기)|utmcmd=유기|utmctr=(제공되지 않음)"
*/
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 && 사용자 이름!="")
{alert('환영합니다 ' 사용자 이름 '!')}
else
{
username=prompt('이름을 입력하세요:',"")
if (username!=null && username!="")
{
setCookie('username',username,365 )
}
}
}

전체 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.