JavaScript에서 document.cookie 사용

高洛峰
풀어 주다: 2016-11-26 13:27:16
원래의
1335명이 탐색했습니다.

우리는 문서 객체에 쿠키 속성이 있다는 것을 이미 알고 있습니다. 그런데 쿠키란 무엇입니까? "일부 웹 사이트는 쿠키라는 작은 텍스트 파일로 정보를 하드 드라이브에 저장합니다." - MSIE 도움말 일반적으로 쿠키는 HTML보다 더 발전된 CGI 또는 유사한 파일, 프로그램 등에 의해 생성되지만, 자바스크립트는 쿠키에 대한 매우 포괄적인 액세스 권한도 제공합니다.

먼저 쿠키에 대한 기본 지식을 배워야 합니다.

각 쿠키는 다음과 같습니다. <쿠키 이름>=<값>

<쿠키 이름> 키워드는 사용할 수 없습니다.", "URL 인코딩에 사용할 수 있는 문자만"이 추가되었습니다. 후자가 더 이해하기 어렵지만 이름에 문자와 숫자만 사용하면 괜찮습니다. 에 대한 요구 사항도 "URL 인코딩에 사용할 수 있는 문자"입니다.

각 쿠키에는 만료 날짜가 있습니다. 컴퓨터 시계가 만료 날짜를 지나면 쿠키가 삭제됩니다. 쿠키를 직접 삭제할 수는 없지만 만료일을 현재 시간보다 이전으로 설정하여 간접적으로 삭제할 수 있습니다.

각 웹페이지 또는 각 사이트에는 고유한 쿠키가 있습니다. 이러한 쿠키는 이 사이트의 웹페이지에서만 액세스할 수 있으며, 다른 사이트의 웹페이지 또는 동일한 사이트의 승인되지 않은 영역에는 액세스할 수 없습니다. 쿠키의 각 "그룹"에는 지정된 총 크기("그룹"당 약 2KB)가 있습니다. 최대 총 크기를 초과하면 새 쿠키가 "정착"될 수 있도록 가장 먼저 만료된 쿠키가 삭제됩니다.

이제 document.cookie 속성을 사용하는 방법을 배워보겠습니다.

document.cookie 속성을 직접 사용하거나 변수에 값을 할당하는 등의 방법을 사용하여 document.cookie 값을 가져오면 현재 쿠키가 몇 개 있는지 알 수 있습니다. 문서 각각 각 쿠키의 이름과 해당 값입니다. 예를 들어 문서에 "document.write(documents.cookie)"를 추가하면 결과는 다음과 같습니다.

name=kevin; email=kevin@kevin.html

이는 문서에 이름, 이메일, 마지막 방문의 3개 쿠키가 포함되어 있음을 의미하며, 그 값은 각각 kevin, kevin@kevin.com 및 index.html입니다. 보시다시피 두 쿠키는 세미콜론과 공백으로 구분되므로 cookieString.split('; ') 메서드를 사용하여 각 쿠키의 배열을 가져올 수 있습니다(먼저 var cookieString = document.cookie 사용).

쿠키를 설정하는 방법은 document.cookie에 값을 할당하는 것입니다. 다른 경우의 할당과 달리 document.cookie에 값을 할당하면 원래 쿠키가 삭제되지 않고 쿠키가 추가되거나 원래 쿠키가 변경되기만 합니다. 과제 형식:

document.cookie = 'cookieName=' + escape('cookievalue') + ';expires=' +expirationDateObj.toGMTString();

어지러우신가요? ? 모직물? cookieName은 쿠키의 이름을 나타내고, cookievalue는 쿠키의 값을 나타내며,expirationDateObj는 만료 날짜를 지정하지 않아도 되는 날짜 객체의 이름을 나타냅니다. 만료 날짜를 지정하지 않으면 브라우저는 기본적으로 브라우저를 닫은 후(즉, 모든 창을 닫은 후) 만료되도록 설정됩니다.

먼저 escape() 메소드: 왜 사용해야 할까요? 쿠키 값에 대한 요구 사항은 "URL 인코딩에 사용할 수 있는 문자만 사용할 수 있음"이기 때문입니다. 우리는 "escape()" 메소드가 URL 인코딩 방법에 따라 문자열을 인코딩한다는 것을 알고 있습니다. 그러면 "escape()" 메소드를 사용하여 쿠키에 대한 값 출력을 처리하고 "unescape()"를 사용하여 쿠키에서 출력된 값을 처리합니다. 수신된 값은 확실합니다. 그리고 이 두 가지 방법의 가장 일반적인 용도는 쿠키를 처리하는 것입니다. 실제로 Cookie 설정은 "documents.cookie = 'cookieName=cookievalue'"처럼 간단하지만, cookievalue의 URL에 허용되지 않는 문자가 표시되지 않도록 하려면 escape()를 사용하는 것이 좋습니다.

그리고 "expires" 앞의 세미콜론: 주의하세요. 세미콜론만 있고 다른 것은 없습니다.
마지막 togmtstring() 메소드: GMT 형식으로 쿠키의 적시성을 설정하고 다른 형식의 시간은 작동하지 않습니다.

이제 실제 전투를 해보겠습니다. 3개월 후에 만료되도록 "name=rose"로 쿠키를 설정합니다.

varexpires = new Date();

expires.setTime(expires.getTime() + 3 * 30 * 24 * 60 * 60 * 1000);
/* 3개월 x 1 A 월은 30일 x 하루 24시간
x 시간당 60분 x 분당 60초 x 초당 1000밀리초*/
documents.cookie = 'name=rose;expires=' + 만료됩니다. toGMTString() ;

왜 escape() 메소드가 사용되지 않습니까? 이는 rose가 유효한 URL 인코딩 문자열, 즉 'rose' == escape('rose')임을 알고 있기 때문입니다. 일반적으로 쿠키를 설정할 때 escape()를 사용하지 않으면 쿠키를 가져올 때 unescape()를 사용할 필요가 없습니다.

다시 해 보겠습니다. 지정된 쿠키의 값을 찾는 함수를 작성해 보세요.

function getCookie(cookieName) {
var cookieString = document.cookie;
var start = cookieString.indexOf(cookieName + '=');
//등호를 추가하는 이유 sign 일부 쿠키 값에
// cookieName과 동일한 문자열이 포함되지 않도록 하기 위한 것입니다.
if (start == -1) // 찾을 수 없음
return null;
start += cookieName.length + 1;
var end = cookieString.indexOf(';', start) ;
if (end == -1) return unescape(cookieString.substring(start));
return unescape(cookieString.substring(start, end));
}

이것은 함수는 문자열 객체의 몇 가지 메소드를 사용합니다. 기억이 나지 않으면(메모리가 부족합니까?) 빨리 찾아보세요. 이 함수의 모든 if 문에는 else가 포함되지 않습니다. 이는 조건이 true이면 프로그램이 return 문을 실행하기 때문입니다. 함수에서 return을 만나면 연산이 종료되므로 else를 추가하지 않아도 문제가 없습니다. 이 함수는 쿠키를 찾으면 쿠키 값을 반환하고, 그렇지 않으면 "null"을 반환합니다.

이제 방금 설정한 name=rose 쿠키를 삭제해야 합니다.

varexpires = new Date();
expires.setTime(expires.getTime() - 1);
documents.cookie = 'name=rose;expires=' +expires.toGMTString( ;

첨부된 내용은 외국인이 쿠키를 운용하기 위해 작성한 js 함수입니다


///Set cookie

function setCookie(NameOfCookie, value , 만료일 )

{

//@매개변수: 세 가지 변수가 새 쿠키를 설정하는 데 사용됩니다:
//쿠키 이름, 저장된 쿠키 값,
// 및 쿠키 만료 time.
//이 줄은 일을 법적 날짜로 변환합니다

var ExpireDate = new Date ();

ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));

// 다음 줄은 쿠키를 저장하는 데 사용됩니다. 간단히 "document.cookie"에 값을 할당하면 됩니다.
// 날짜에 주의하세요. GMT 시간으로 변환됩니다. toGMTstring() 함수를 통해.

document.cookie = NameOfCookie + "=" + escape(value) +

((expiredays == null) ? "" : ";expires=" + ExpireDate.toGMTString()) ;

}

///쿠키 값 가져오기
function getCookie(NameOfCookie)
{

// 먼저 쿠키가 존재하는지 확인합니다.
// 존재하지 않으면 document.cookie 길이는 0
if (document.cookie.length > 0)
{

// 그런 다음 쿠키 이름이 있는지 확인합니다. document.cookie에 존재합니다
// 쿠키 값이 2개 이상 저장되어 있으므로 document.cookie의 길이가 0이 아니더라도 원하는 이름의 쿠키가 존재한다는 보장은 없습니다
//그래서 원하는 쿠키가 있는지 확인하려면 이 단계가 필요합니다.
//begin의 변수 값이 -1이면 쿠키가 존재하지 않는다는 의미입니다.
begin = document.cookie.indexOf(NameOfCookie+"=" );
if (begin != - 1)
{
// 쿠키의 존재를 나타냅니다.
begin += NameOfCookie.length+1;//쿠키 값의 초기 위치입니다.
end = document.cookie.indexOf(";" , start);//끝 위치
if (end == -1) end = document.cookie.length;//아니요 end가 끝입니다. 문자열 위치
return unescape(document.cookie.substring(begin, end)); }
}

return null;

// 쿠키가 존재하지 않으며 return null
}


///쿠키 삭제
function delCookie(NameOfCookie)
{
// 쿠키가 설정되어 있는지 확인하는 함수입니다. , 만료 시간은 과거 시간으로 조정됩니다.
//나머지는 작업에 남습니다. 시스템은 적절한 시간에 쿠키를 삭제합니다.



if (getCookie(NameOfCookie) ) {www.2cto.com
document.cookie = NameOfCookie + "=" +
"; 만료 = 70년 1월 1일 목요일 00:00:01 GMT";
}
}

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿