JavaScript 및 쿠키
쿠키 란 무엇입니까?
웹 브라우저와 서버는 HTTP 프로토콜을 사용하여 통신하고 HTTP는 상태 비 저장 프로토콜입니다. 그러나 상업용 웹 사이트의 경우 서로 다른 페이지간에 세션 정보를 유지해야합니다. 예를 들어 하나의 사용자 등록은 여러 페이지를 완료 한 후 종료됩니다. 그러나 모든 웹 페이지에서 사용자의 세션 정보를 유지하는 방법.
많은 상황에서 쿠키 사용은 더 나은 방문자 경험이나 사이트 통계에 필요한 선호도, 구매, 커미션 및 기타 정보를 기억하고 추적하는 가장 효율적인 방법입니다.
어떻게 작동합니까?
귀하의 서버는 쿠키 형태로 방문자의 브라우저에 일부 데이터를 보냅니다. 브라우저는 쿠키를 수락 할 수 있습니다. 그렇다면 방문자의 하드 드라이브에 일반 텍스트 레코드로 저장됩니다. 이제 방문자가 사이트의 다른 페이지에 도착하면 브라우저는 검색을 위해 동일한 쿠키를 서버로 보냅니다. 일단 검색되면 서버는 이전에 저장된 내용을 알고 / 기억합니다.
쿠키는 5 개의 가변 길이 필드의 일반 텍스트 데이터 레코드입니다.
Expires− 쿠키가 만료되는 날짜. 비어있는 경우 방문자가 브라우저를 종료 할 때 쿠키가 만료됩니다.
Domain − 사이트의 도메인 이름.
Path− 쿠키를 설정 한 디렉토리 또는 웹 페이지의 경로. 디렉토리 나 페이지에서 쿠키를 검색하려는 경우 비어있을 수 있습니다.
Secure−이 필드에 "secure"라는 단어가 포함 된 경우 쿠키는 보안 서버를 통해서만 검색 될 수 있습니다. 이 필드가 비어 있으면 그러한 제한이 없습니다.
Name=Value − 쿠키는 키-값 쌍의 형태로 설정 및 검색됩니다.
쿠키는 원래 CGI 프로그래밍을 위해 설계되었습니다. 쿠키에 포함 된 데이터는 웹 브라우저와 웹 서버간에 자동으로 전송되므로 서버의 CGI 스크립트는 클라이언트에 저장된 쿠키 값을 읽고 쓸 수 있습니다.
JavaScript는 또한 다음을 사용하여 쿠키를 조작 할 수 있습니다. cookie 의 재산 Document목적. JavaScript는 현재 웹 페이지에 적용되는 쿠키를 읽고, 만들고, 수정하고, 삭제할 수 있습니다.
쿠키 저장
쿠키를 만드는 가장 간단한 방법은 다음과 같은 문자열 값을 document.cookie 객체에 할당하는 것입니다.
document.cookie = "key1 = value1;key2 = value2;expires = date";여기 expires속성은 선택 사항입니다. 이 속성에 유효한 날짜 또는 시간을 제공하면 쿠키가 지정된 날짜 또는 시간에 만료되고 그 이후에는 쿠키 값에 액세스 할 수 없습니다.
Note− 쿠키 값에는 세미콜론, 쉼표 또는 공백이 포함될 수 없습니다. 이러한 이유로 JavaScript를 사용하고 싶을 수 있습니다.escape()값을 쿠키에 저장하기 전에 인코딩하는 함수입니다. 이렇게하면 해당하는unescape() 쿠키 값을 읽을 때 기능.
예
다음을 시도하십시오. 입력 쿠키에 고객 이름을 설정합니다.
<html>
<head>
<script type = "text/javascript">
<!--
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>산출
이제 귀하의 컴퓨터에는 name. 쉼표로 구분 된 여러 키 = 값 쌍을 사용하여 여러 쿠키를 설정할 수 있습니다.
쿠키 읽기
document.cookie 객체의 값이 쿠키이기 때문에 쿠키를 읽는 것은 쿠키를 쓰는 것만 큼 간단합니다. 따라서 쿠키에 액세스 할 때마다이 문자열을 사용할 수 있습니다. document.cookie 문자열은 세미콜론으로 구분 된 이름 = 값 쌍 목록을 유지합니다.name 쿠키의 이름이고 값은 해당 문자열 값입니다.
문자열을 사용할 수 있습니다. ' split() 다음과 같이 문자열을 키와 값으로 나누는 함수-
예
모든 쿠키를 얻으려면 다음 예제를 시도하십시오.
<html>
<head>
<script type = "text/javascript">
<!--
function ReadCookie() {
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write ("Key is : " + name + " and Value is : " + value);
}
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
<p> click the following button and see the result:</p>
<input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</form>
</body>
</html>Note − 여기 length 방법입니다 Array배열의 길이를 반환하는 클래스. 별도의 장에서 배열에 대해 설명합니다. 그때까지 소화해보세요.
Note− 컴퓨터에 이미 다른 쿠키가 설정되어있을 수 있습니다. 위의 코드는 컴퓨터에 설정된 모든 쿠키를 표시합니다.
쿠키 만료 날짜 설정
만료 날짜를 설정하고 쿠키 내에 만료 날짜를 저장하여 현재 브라우저 세션 이상으로 쿠키 수명을 연장 할 수 있습니다. 이것은 설정하여 수행 할 수 있습니다.‘expires’ 날짜와 시간에 대한 속성입니다.
예
다음 예제를 시도하십시오. 쿠키의 만료일을 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() + ";"
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>산출
쿠키 삭제
때때로 쿠키를 삭제하여 이후에 쿠키를 읽으려는 시도가 아무것도 반환하지 않도록 할 수 있습니다. 이렇게하려면 만료 날짜를 과거 시간으로 설정하기 만하면됩니다.
예
다음 예제를 시도하십시오. 만료일을 현재 날짜보다 한 달 뒤로 설정하여 쿠키를 삭제하는 방법을 보여줍니다.
<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() + ";"
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>