JavaScript_기본 지식에서 쿠키 사용에 대한 튜토리얼
- WBOY원래의
- 2016-05-16 15:56:411220검색
쿠키란 무엇인가요?
웹 브라우저와 서버는 HTTP 프로토콜을 사용하여 통신하며 HTTP는 상태 비저장 프로토콜입니다. 그러나 상업용 웹사이트의 경우 서로 다른 페이지 간의 세션 정보를 유지해야 합니다. 예를 들어, 여러 페이지를 완료하면 사용자 등록이 종료됩니다. 그러나 모든 웹 사용자의 세션 정보를 유지하는 방법은 무엇입니까?
많은 경우, 쿠키를 사용하는 것은 더 나은 방문 경험이나 웹사이트 통계를 위한 선호도, 구매, 커미션, 요청과 같은 정보를 기억하고 추적하는 가장 효과적인 방법입니다.
어떻게 작동하나요?
서버는 일부 데이터를 쿠키 형태로 방문자의 브라우저에 보냅니다. 이 브라우저는 쿠키를 허용할 수 있습니다. 그렇다면 그것은 방문자를 위해 하드 드라이브에 저장된 텍스트 전용 기록입니다. 이제 방문자가 사이트의 다른 페이지에 도달하면 브라우저는 검색을 위해 동일한 쿠키를 서버로 보냅니다. 일단 검색되면 서버는 방금 저장된 내용을 알고/기억합니다.
쿠키에는 5개의 가변 길이 필드가 있는 일반 텍스트 데이터 기록이 있습니다.
- 만료: 쿠키가 만료되는 날짜입니다. 비어 있으면 방문자가 브라우저를 종료할 때 쿠키가 만료됩니다.
- 도메인: 웹사이트의 도메인 이름입니다.
- 경로: 쿠키 디렉터리 또는 웹페이지를 설정하는 경로입니다. 임의의 디렉토리나 페이지에서 검색하려는 경우 쿠키가 비어 있습니다.
- 보안: 이 필드에 "보안"이라는 단어가 포함되어 있으면 쿠키는 보안 서버만 검색할 수 있습니다. 이 필드가 비어 있으면 제한이 없습니다.
- 이름=값: 쿠키 설정은 키와 값 쌍의 형태로 얻어집니다.
쿠키는 원래 CGI 프로그래밍에 사용하도록 설계되었으며 쿠키 데이터는 웹 브라우저와 웹 서버 간에 자동으로 전송되므로 서버의 CGI 스크립트가 클라이언트 값에 저장된 쿠키를 읽고 쓸 수 있습니다.
JavaScript는 문서 개체의 쿠키 속성을 사용하여 작동할 수도 있습니다. JavaScript는 쿠키 또는 현재 웹페이지에 적용되는 쿠키를 읽고, 생성하고, 수정하고, 삭제할 수 있습니다.
쿠키 저장:
쿠키를 만드는 가장 간단한 방법은 document.cookie 개체에 다음과 같은 문자열 값을 할당하는 것입니다.
문법
document.cookie = "키1=값1;키2=값2;만료=날짜";
여기서 속성 옵션이 만료됩니다. 이 속성에 유효한 날짜 또는 시간이 제공되면 쿠키는 지정된 날짜 또는 시간에 만료되고 쿠키 값에 액세스할 수 없게 됩니다.
참고: 쿠키 값에는 세미콜론, 쉼표 또는 공백이 포함될 수 없습니다. 이러한 이유로 쿠키 이전에 저장된 값을 인코딩하려면 JavaScript의 escape() 함수를 사용해야 할 수도 있습니다. 이렇게 하면 쿠키 값을 읽을 때 해당 unescape() 함수도 사용해야 합니다.
쿠키 읽기:
document.cookieobject의 값이 쿠키이기 때문에 쿠키를 읽는 것은 쓰는 것만큼 쉽습니다. 따라서 쿠키에 접근하고 싶을 때마다 이 문자열을 사용할 수 있습니다.
document.cookie 문자열은 세미콜론으로 이어집니다. 여기서 name은 쿠키의 이름이고 value는 문자열 값으로 구분된 이름=값 쌍의 목록입니다.
쿠키 만료일 설정:
저장된 쿠키에 만료 날짜와 만료 날짜를 설정하면 현재 브라우저 세션 이후에도 쿠키의 수명을 연장할 수 있습니다. 이는 만료 속성의 날짜와 시간을 설정하여 수행할 수 있습니다.
예:
다음 예에서는 쿠키가 1개월 후에 만료되도록 설정하는 방법을 보여줍니다.
<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
var now = new Date();
now.setMonth( now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie="name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>
쿠키 삭제:
가끔 쿠키를 삭제하고 싶은 경우 나중에 쿠키를 읽으려고 하면 무엇이 반환될 때가 있습니다. 이렇게 하려면 만료 날짜를 과거의 특정 시간으로 설정하면 됩니다.
예:
다음 예에서는 만료일을 한 달 전으로 설정하여 쿠키를 삭제하는 방법을 보여줍니다.
<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie="name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>
참고: 날짜를 설정하지 않고 setTime() 함수를 사용하여 새 값을 확인할 수 있습니다.