쿠키는 무엇입니까?
"쿠키는 방문자의 컴퓨터에 저장된 변수입니다.이 쿠키는 동일한 컴퓨터가 브라우저를 통해 페이지를 요청할 때마다 전송됩니다. JavaScript를 사용하여 쿠키의 값을 작성하고 검색 할 수 있습니다." -W3School
쿠키는 방문한 웹 사이트에서 만든 파일이며 프로필 정보와 같은 브라우징 정보를 저장하는 데 사용됩니다.
JavaScript의 관점에서 쿠키는 일부 문자열 정보입니다. 이 정보는 클라이언트의 컴퓨터에 저장되며 클라이언트 컴퓨터와 서버간에 정보를 전달하는 데 사용됩니다.
이 정보는 JavaScript의 문서를 통해 읽거나 설정할 수 있습니다. 쿠키는 주로 클라이언트와 서버간에 통신하는 데 사용되므로 JavaScript 외에도 서버 언어 (예 : PHP)도 쿠키에 액세스 할 수 있습니다.
쿠키 기본 사항
쿠키의 크기 제한이 있습니다. 각 쿠키에 저장된 데이터는 4KB를 초과 할 수 없습니다. 쿠키 스트링의 길이가 4KB를 초과하면이 속성은 빈 문자열을 반환합니다.
쿠키는 궁극적으로 클라이언트 컴퓨터에 파일 형태로 저장되므로 쿠키를보고 수정하는 것이 매우 편리하므로 쿠키가 중요한 정보를 저장할 수 없다고 종종 말합니다.
각 쿠키의 형식은 다음과 같습니다. <쿠키 이름> = <value>; 이름과 가치는 모두 법적 식별자 여야합니다.
쿠키는 일정 기간 동안 유효합니다. 기본적으로 쿠키의 수명주기는 브라우저가 닫히면 끝납니다. 브라우저가 꺼진 후 쿠키를 사용할 수 있으려면 쿠키의 만료 날짜 인 쿠키의 유효 기간을 설정해야합니다.
alert (typeof document.cookie) 결과는 문자열입니다. 나는 그것이 배열이라고 생각했고 농담을했다 ...
쿠키에는 도메인과 경로의 개념이 있습니다. 도메인은 도메인의 개념입니다. 브라우저는 보안에 민감한 환경이므로 다른 도메인은 서로 쿠키에 액세스 할 수 없습니다 (물론 특수 설정을 통해 크로스 도메인 액세스를 달성 할 수 있습니다). 경로는 라우팅의 개념입니다. 웹 페이지에서 만든 쿠키는이 웹 페이지와 동일한 디렉토리 나 서브 디렉토리의 모든 웹 페이지에서만 액세스 할 수 있지만 다른 디렉토리에서는 액세스 할 수 없습니다 (이 문장은 약간 혼란스럽고 잠시 후에는 쉽게 이해하기 쉽습니다).
실제로 쿠키를 만드는 방법은 변수를 정의하는 방법과 다소 유사합니다. 둘 다 쿠키 이름과 쿠키 값을 사용해야합니다. 동일한 웹 사이트에서 여러 쿠키를 만들 수 있으며 동일한 쿠키 파일에 여러 쿠키를 저장할 수 있습니다.
쿠키 FAQ
쿠키에는 두 가지 유형이 있습니다.
당신이 탐색하는 현재 웹 사이트에서 설정 한 쿠키
웹 페이지에 광고 또는 이미지를 포함시키는 다른 도메인 소스의 타사 쿠키 (웹 사이트는 이러한 쿠키를 사용하여 사용 정보를 추적 할 수 있음)
기본 지식은 방금 쿠키의 수명주기 문제를 언급했습니다. 실제로 쿠키는 대략 두 상태로 나눌 수 있습니다.
임시 쿠키. 현재 사용 프로세스 중에 웹 사이트는 일부 개인 정보를 저장하고 브라우저가 닫힌 후 컴퓨터에서 정보가 삭제됩니다.
만료 시간 동안 쿠키를 설정합니다. 브라우저가 꺼져 있어도 정보 산업은 여전히 컴퓨터에 있습니다. 로그인 이름 및 비밀번호와 같이 특정 사이트로 갈 때마다 로그인 할 필요가 없습니다. 이 쿠키는 며칠, 몇 달 또는 몇 년 동안 컴퓨터에 보관할 수 있습니다.
쿠키를 청소하는 두 가지 방법이 있습니다.
브라우저 도구를 통한 쿠키 투명 (타사 도구가 있으며 브라우저 자체 에도이 기능이 있습니다).
쿠키의 유효 기간을 설정하여 쿠키를 청소하십시오
참고 : 쿠키를 삭제하면 일부 웹 페이지가 제대로 작동하지 않을 수 있습니다.
브라우저는 설정을 통해 쿠키에 대한 액세스를 허용하고 거부 할 수 있습니다.
기능적 및 성능의 이유로 사용 된 쿠키 수를 최소화하고 가능한 한 작은 쿠키를 사용하는 것이 좋습니다.
쿠키 인코딩에 대한 자세한 내용은 쿠키 고급 기사에서 개별적으로 소개됩니다.
로컬 디스크의 페이지 인 경우 Chrome 콘솔은 JavaScript를 사용하여 쿠키를 읽고 쓸 수 없습니다. 해결책은 ... 브라우저를 변경하는 것입니다^_^.
쿠키의 기본 사용
1. 간단한 액세스 작업
JavaScript를 사용하여 쿠키에 액세스 할 때 문서 개체의 쿠키 속성을 사용해야합니다. 코드 라인은 쿠키를 생성하고 수정하는 방법을 소개합니다.
코드 사본은 다음과 같습니다.
document.cookie = 'username = darren';
위의 코드에서 '사용자 이름'은 쿠키 이름을 나타내고 'Darren'은이 이름에 해당하는 값을 나타냅니다. 쿠키 이름이 존재하지 않는다고 가정하면 새 쿠키가 생성됩니다. 존재하면 쿠키 이름에 해당하는 값이 수정됩니다. 쿠키를 여러 번 만들려면이 방법을 반복해서 사용하십시오.
2. 쿠키 독서 작전
실제로 쿠키를 정확하게 읽는 것은 매우 간단합니다.이 쿠키는 문자열에서 작동하는 것입니다. 분석하려면이 코드를 W3School에 복사하십시오.
코드 사본은 다음과 같습니다.
함수 getCookie (c_name) {
if (document.cookie.length> 0) {// 먼저 쿠키가 비어 있는지 확인하십시오.
c_start = document.cookie.indexof (c_name + "=") //이 쿠키가 문자열 객체의 indexof ()를 통해 존재하는지 확인하십시오. 존재하지 않으면 -1입니다
if (c_start! = -1) {
c_start = c_start +c_name.length +1 // 마지막 +1은 실제로 "="숫자를 의미하므로 쿠키 값의 시작 위치가 얻어집니다.
c_end = document.cookie.indexof ( ";", c_start) // 실제로, indexof ()의 두 번째 매개 변수를 보았을 때 갑자기 어지러워졌습니다. 나중에 지정된 시작 인덱스 위치를 나타내는 것을 기억했습니다.이 문장은 값의 종료 위치를 얻는 것입니다. 그것이 마지막 항목인지 고려해야하기 때문에 ";"에 의해 판단됩니다. 숫자가 존재합니다.
if (c_end == -1) c_end = document.cookie.length
Unescape를 반환합니다 (document.cookie.substring (c_start, c_end)) // 값은 substring ()을 통해 얻습니다. Unescape ()를 이해하려면 먼저 Escape ()가하는 일을 알아야합니다. 그들은 모두 매우 중요한 기본입니다. 알고 싶다면 검색 할 수 있습니다. 쿠키 인코딩의 세부 사항은 기사 끝에 설명됩니다.
}
}
반품 ""
}
물론 배열, 규칙 성 등과 같은 쿠키를 구현하는 방법에는 여러 가지가 있으므로 여기에서는 자세히 설명하지 않습니다.
3 쿠키의 유효 기간을 설정하십시오
기사에 종종 나타나는 쿠키의 수명주기는 유효 기간과 만료 기간, 즉 쿠키가 존재하는 시간입니다. 기본적으로 브라우저가 닫히면 쿠키가 자동으로 지워지지 만 만료를 통해 쿠키의 유효성 기간을 설정할 수 있습니다. 구문은 다음과 같습니다.
코드 사본은 다음과 같습니다.
document.cookie = "name = value; 만료 = 날짜";
위 코드의 날짜 값은 GMT (Greenwich Time) 형식의 날짜 유형 문자열이며 생성 메소드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var _date = 새 날짜 ();
_date.setDate (_date.getDate ()+30);
_date.togmtstring ();
위의 세 줄의 코드는 여러 단계로 나뉩니다.
현재 시간을 얻으려면 새로운 날짜 인스턴스를 생성합니다.
getDate () 메소드는 현재 현지 달에 하루를 보낸 다음 30을 추가합니다. 즉,이 쿠키가 30 일 동안 현지에서 저장 될 수 있기를 바랍니다.
그런 다음 setDate () 메소드를 통해 시간을 설정합니다.
마지막으로 togmtstring () 메소드를 사용하여 날짜 개체를 문자열로 변환하고 결과를 반환합니다.
다음 전체 기능은 쿠키를 만들 때주의를 기울여야 할 사항을 보여줍니다. 쿠키에 정보를 저장하는 기능을 만듭니다.
코드 사본은 다음과 같습니다.
함수 setCookie (c_name, value, 만료) {
var exdate = 새로운 날짜 ();
exdate.setDate (exdate.getDate () + 만료);
document.cookie = c_name + "=" + Escape (value) + ((expreiredays == null)? ":"; expires = " + exdate.togmtstring ());
}
// 사용 방법 : setCookie ( '사용자 이름', 'Darren', 30)
이제 우리의 기능은 일수에 따라 쿠키의 유효한 시간을 설정합니다. 다른 단위 (예 : 시간)로 설정하려면 세 번째 코드 줄을 변경하십시오.
코드 사본은 다음과 같습니다.
exdate.sethours (exdate.gethours () + 만료);
이런 식으로 쿠키의 유효 기간은 시간을 기준으로합니다.
FAQ에서 쿠키를 청소하는 두 가지 방법이 있습니다. 이제 우리는 유효성 기간을 만료 된 시간으로 설정하여 쿠키가 무효화되었다고 말하고 싶습니다. 만료 날짜를 설정하는 방법이 있으므로 관심있는 친구들에게 직접 해달라고 요청하십시오^_^. 아래에서 더 깊은 쿠키 주제를 계속하겠습니다.
쿠키 고급
하나. 쿠키 경로 개념
기본에는 도메인과 경로가있는 쿠키의 개념에 대한 언급이 있습니다. 이제 쿠키에서 경로의 역할을 소개하겠습니다.
쿠키는 일반적으로 사용자가 페이지에 액세스하기 때문에 생성되지만이 쿠키는 쿠키가 생성되는 페이지에서만 액세스 할 수 없습니다.
기본적으로 쿠키를 만든 페이지와 동일한 디렉토리 또는 서브 디렉토리의 웹 페이지 만 액세스 할 수 있습니다. 이는 보안 고려 사항에 기인합니다. 모든 페이지가 다른 페이지에서 다른 페이지에서 만든 쿠키에 액세스 할 수있는 것은 아닙니다. 예를 들어:
"//www.vevb.com/darren_code/"페이지에서 쿠키를 만듭니다. 그런 다음 "//www.vevb.com/darren_code/archive/2011/11/07/cookie.html"과 같은 경로 아래의 페이지는 기본적으로 쿠키 정보를 얻을 수 있습니다.
기본적으로 "//www.vevb.com"또는 "//www.vevb.com/xxxx/"이 쿠키에 액세스 할 수 없습니다 (단지 그것을보고 진실을 실천하는 것은 쓸모가 없습니다^_^).
따라서이 쿠키를 다른 디렉토리 나 부모 디렉토리에 액세스 할 수 있도록하는 방법은 쿠키의 경로를 설정하여이를 달성 할 수 있습니다. 예는 다음과 같습니다.
코드 사본은 다음과 같습니다.
document.cookie = "name = value; path = path"
document.cookie = "name = value; 만료 = 날짜; 경로 = 경로"
빨간색 글꼴 경로는 쿠키의 경로입니다. 가장 일반적인 예는 쿠키가 디렉토리에 있도록하는 것입니다. 따라서 어떤 서브 페이지를 작성하든 모든 페이지에 액세스 할 수 있습니다.
코드 사본은 다음과 같습니다.
document.cookie = "name = darren; path =/";
두 번째 .cookie 도메인 개념
경로는 동일한 도메인에서 쿠키에 액세스하는 문제를 해결할 수 있습니다. 동일한 도메인간에 쿠키에 액세스하는 문제에 대해 계속 이야기합시다. 구문은 다음과 같습니다.
코드 사본은 다음과 같습니다.
document.cookie = "name = value; path = path; domain = domain";
빨간색 도메인은 쿠키 필드 세트의 값입니다.
예를 들어, "www.qq.com"및 "sports.qq.com"관련 도메인 이름 "qq.com"을 공유합니다. "www.qq.com"에 의해 "sports.qq.com"에서 쿠키에 액세스하려면 쿠키의 도메인 속성을 사용하고 경로 속성을 "/"로 설정해야합니다. 예:
코드 사본은 다음과 같습니다.
document.cookie = "username = darren; path =/; domain = qq.com";
참고 : 동일한 도메인간에 확실히 액세스하고 도메인 값을 기본 도메인이 아닌 도메인 이름으로 설정할 수 없습니다.
3. 쿠키 보안
일반적으로 쿠키 정보는 HTTP 연결을 사용하여 데이터를 전달하는 데 사용됩니다. 이 배달 방법은보기 쉽기 때문에 쿠키에 저장된 정보를 쉽게 도난 당할 수 있습니다. 쿠키에 전달 된 콘텐츠가 더 중요하다면 암호화 된 데이터 전송이 필요합니다.
따라서 쿠키 의이 속성의 이름은 "보안"이며 기본값은 비어 있습니다. 쿠키의 속성이 안전한 경우 HTTPS 또는 기타 보안 프로토콜을 통해 데이터와 서버간에 데이터가 전송됩니다. 구문은 다음과 같습니다.
코드 사본은 다음과 같습니다.
document.cookie = "username = darren; secure"
쿠키를 안전하게 설정하면 쿠키와 서버 간의 데이터 전송 프로세스가 암호화되도록하는 반면 로컬로 저장된 쿠키 파일은 암호화되지 않습니다. 로컬 쿠키를 암호화하려면 데이터를 직접 암호화해야합니다.
참고 : 보안 속성이 설정되어 있더라도 다른 사람들이 쿠키 정보가 컴퓨터에 로컬로 저장된 것을 볼 수 없다는 것을 의미하지는 않습니다. 결국 쿠키에 중요한 정보를 넣지 마십시오.
4. 쿠키 인코딩 세부 사항
원래 FAQ 섹션에서 쿠키 인코딩에 대한 지식을 소개하고 싶었습니다.이를 이해하지 못하면 인코딩 문제는 실제로 함정이기 때문에 자세히 이야기하겠습니다.
쿠키 정보를 입력 할 때는 공백, 세미콜론, 쉼표 등과 같은 특수 기호를 포함 할 수 없으며 일반적으로 쿠키 정보의 저장은 인코딩되지 않은 방식입니다. 따라서 쿠키 정보를 설정하기 전에 먼저 Escape () 함수를 사용하여 쿠키 값 정보를 인코딩하고 쿠키 값을 얻을 때 unescape () 함수를 사용하여 값을 다시 변환해야합니다. 쿠키를 설정하는 경우 :
코드 사본은 다음과 같습니다.
document.cookie = name + "=" + 탈출 (값);
기본 사용법에 언급 된 getCookie ()의 문장을 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
Unescape를 반환합니다 (document.cookie.substring (c_start, c_end));
이런 식으로 쿠키 값에 특수 기호가 나타나기 때문에 쿠키 정보 오류에 대해 걱정할 필요가 없습니다.
개인 코드
코드 사본은 다음과 같습니다.
/*쿠키 설정*/
함수 setCookie (c_name, 값, 만료, 경로, 도메인, 보안) {
var exdate = 새로운 날짜 (); // 현재 시간을 얻습니다
exdate.setDate (exdate.getDate () + 만료); // 만료 시간
document.cookie = c_name + "=" + // 쿠키 이름
탈출 (값) + // 쿠키 값을 인코딩합니다
(((expreiredays == null)? ":"; Expires = " + exdate.togmtstring ()) + // 만료 시간 설정
(((path == null)? '/': '; path =' + path) + // 액세스 경로 설정
(((domain == null)? '': '; domain =' + domain) + // 액세스 도메인 설정
((Secure == null)? '': '; secure =' + secure); // 암호화 여부를 설정합니다
};
setCookie ( 'test', 'name = sheng; sex = men; lancer = dullbear', 30);
setCookie ( 'bb', 'name = sheng; sex = men', 30);
/*쿠키 받기*/
함수 getCookie (C_Name, index) {
var 쿠키 = Document.Cookie; // 쿠키 값을 얻습니다
var cookielen = 쿠키. 길이; // 쿠키 길이를 얻습니다
if (cookielen> 0) {// 쿠키가 비어 있지 않을 때
var c_start = cookies.indexof (c_name + '='); // 쿠키에서 쿠키 값에 필요한 일련 번호 찾기
if (c_start> -1) {// 쿠키 값이있을 때
c_start + = c_name.length + 1; // 쿠키 값의 시작 시퀀스 번호를 얻습니다
var c_end = cookies.indexof ( ';', c_start); // 쿠키 값의 최종 시퀀스 번호를 얻습니다
if (c_end == -1) {// 쿠키가 마지막 일 때
c_end = Cookielen; // 쿠키 값의 끝 시퀀스 번호를 쿠키 길이로 설정
};
var cookiest = unescape (cookies.substring (c_start, c_end)); // 디코딩 된 쿠키 값을 얻습니다
var cookieobj = cookiestr.split ( ';'); // 쿠키 값 분할
index = ((index == null)? 0 : index); // 색인이 값으로 전달되는지 판단합니다
var GoalOBJ = CookieoBJ [index]; // 색인 배열
var govingtr = GoalObj.split ( '=');
var getCook = GOORTR [1]; // 획득 해야하는 쿠키 값을 얻습니다
반환 getcook;
};
} 또 다른 {
Console.log ( '페이지에는 쿠키가 없습니다');
}
};
경고 (getCookie ( 'test', 0)); // 쿼리 쿠키 값을 인쇄합니다