쿠키를 운영하는 JavaScript에 대한 자세한 설명_기본지식

쿠키란

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

쿠키는 방문한 웹사이트에서 프로필 정보 등 검색 정보를 저장하기 위해 생성한 파일입니다.

JavaScript 관점에서 쿠키는 단지 문자열 정보일 뿐입니다. 이 정보는 클라이언트의 컴퓨터에 저장되며 클라이언트 컴퓨터와 서버 간에 정보를 전송하는 데 사용됩니다.

이 정보는 JavaScript의 document.cookie를 통해 읽거나 설정할 수 있습니다. 쿠키는 주로 클라이언트와 서버 간의 통신에 사용되므로 JavaScript 외에 서버측 언어(예: PHP)에서도 쿠키에 접근할 수 있습니다.

쿠키 기본

쿠키에는 크기 제한이 있습니다. 각 쿠키에 저장되는 데이터는 4kb를 초과할 수 없습니다. 쿠키 문자열의 길이가 4kb를 초과하면 이 속성은 빈 문자열을 반환합니다.

쿠키는 궁극적으로 클라이언트 컴퓨터에 파일 형태로 저장되기 때문에 쿠키를 확인하고 수정하는 것이 매우 편리합니다. 그렇기 때문에 쿠키는 중요한 정보를 저장할 수 없다는 말이 자주 나옵니다.

각 쿠키의 형식은 다음과 같습니다. <쿠키 이름>=<값>; 이름과 값은 모두 법적 식별자여야 합니다.

쿠키에는 만료일이 있습니다. 기본적으로 쿠키의 수명주기는 브라우저가 닫힐 때 종료됩니다. 브라우저를 닫은 후에도 쿠키를 사용할 수 있도록 하려면 쿠키의 만료 날짜인 쿠키의 유효 기간을 설정해야 합니다.

alert(typeof document.cookie) 결과는 문자열입니다. 배열인 줄 알고 농담을 한 적도 있습니다. 囧

쿠키는 도메인과 경로의 개념을 가지고 있습니다. 도메인은 도메인의 개념입니다. 브라우저는 보안을 고려한 환경이므로 서로 다른 도메인이 서로 쿠키에 액세스할 수 없습니다(물론 특수 설정을 통해 쿠키에 대한 교차 도메인 액세스가 가능합니다). Path는 라우팅의 개념입니다. 웹페이지에서 생성된 쿠키는 이 웹페이지와 동일한 디렉터리나 하위 디렉터리에 있는 모든 웹페이지에서만 접근할 수 있으며, 다른 디렉터리에 있는 웹페이지에서는 접근할 수 없습니다. 나중에) 예를 들어보면 이해하기 더 쉽습니다.

사실 쿠키를 생성하는 방법은 변수를 정의하는 방법과 다소 유사합니다. 둘 다 쿠키 이름과 쿠키 값을 사용해야 합니다. 동일한 웹사이트에서 여러 쿠키를 생성할 수 있으며, 여러 쿠키가 동일한 쿠키 파일에 저장될 수 있습니다.

쿠키 FAQ

쿠키에는 두 가지 유형이 있습니다.

현재 탐색 중인 웹사이트에서 설정한 쿠키

삽입된 광고, 웹페이지 이미지 등 다른 도메인 소스의 제3자 쿠키(웹사이트에서는 이러한 쿠키를 사용하여 귀하의 사용 정보를 추적할 수 있음)

방금 기본 지식에서 쿠키 수명주기 문제에 대해 언급했습니다. 실제로 쿠키는 크게 두 가지 상태로 나눌 수 있습니다.

임시 쿠키. 웹사이트는 현재 사용 중에 귀하의 개인 정보 중 일부를 저장하며, 이 정보는 브라우저를 닫을 때 귀하의 컴퓨터에서도 삭제됩니다

쿠키에 만료 시간을 설정하세요. 브라우저를 닫아도 이 정보는 컴퓨터에 그대로 남아 있습니다. 로그인 이름, 비밀번호 등을 입력하면 특정 사이트에 접속할 때마다 로그인할 필요가 없습니다. 이 쿠키는 며칠, 몇 달, 심지어 몇 년 동안 컴퓨터에 남아 있을 수 있습니다

쿠키를 삭제하는 방법에는 두 가지가 있습니다.

브라우저 도구를 통해 쿠키 삭제(타사 도구가 있으며 브라우저 자체에도 이 기능이 있음)

만료일을 설정하여 쿠키를 삭제하세요

참고: 쿠키를 삭제하면 일부 웹페이지가 제대로 작동하지 않을 수도 있습니다

쿠키에 대한 액세스를 허용하거나 거부하도록 브라우저를 설정할 수 있습니다.

기능적, 성능상의 이유로 사용되는 쿠키의 수를 줄이고, 가능한 한 작은 쿠키를 사용하도록 노력하는 것이 좋습니다.

쿠키 인코딩에 대한 자세한 내용은 쿠키 고급편에서 별도로 소개하겠습니다.

로컬 디스크에 있는 페이지인 경우 Chrome 콘솔은 JavaScript를 사용하여 쿠키를 읽고 쓸 수 없습니다. 해결 방법...브라우저를 변경하세요^_^.

쿠키의 기본 사용법

1.간단한 접근 조작

JavaScript를 사용하여 쿠키에 액세스하는 경우 Document 개체의 쿠키 속성을 사용해야 합니다. 코드 줄은 쿠키를 생성하고 수정하는 방법을 설명합니다.

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

document.cookie = 'username=Darren';


위 코드에서 'username'은 쿠키 이름을 나타내고, 'Darren'은 이 이름에 해당하는 값을 나타냅니다. 쿠키 이름이 없으면 새 쿠키가 생성되고, 있으면 쿠키 이름에 해당하는 값이 수정됩니다. 쿠키를 여러 번 생성하려면 이 방법을 반복해서 사용하면 됩니다.

2. 쿠키 읽기 작업

쿠키를 정확하게 읽는 것은 실제로 매우 간단합니다. 문자열을 연산하기만 하면 됩니다. 분석을 위해 w3school에서 다음 코드를 복사하세요.

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

함수 getCookie(c_name){
　　if (document.cookie.length>0){ 　　//먼저 쿠키가 비어 있는지 확인하고, 비어 있으면 ""를 반환합니다
　　　c_start=document.cookie.indexOf(c_name "=")　//String 객체의 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　
Return unescape(document.cookie.substring(c_start,c_end)) //substring()을 통해 값을 얻습니다. unescape()를 이해하려면 먼저 escape()가 무엇인지 알아야 합니다. 더 알고 싶다면 쿠키 인코딩에 대한 자세한 내용도 마지막에 설명하겠습니다. 기사
　　　}
　　}
"" 반환
}　

물론 쿠키를 읽는 방법은 배열, 정규식 등 다양하므로 여기서는 자세히 다루지 않겠습니다.

3. 쿠키 유효기간 설정

기사에 자주 등장하는 쿠키의 수명주기는 유효기간과 만료기간, 즉 쿠키의 존재시간입니다. 기본적으로 쿠키는 브라우저를 닫으면 자동으로 지워지지만 만료를 통해 쿠키의 유효 기간을 설정할 수 있습니다. 구문은 다음과 같습니다.

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

document.cookie = "이름=값;만료=날짜";

위 코드의 날짜 값은 GMT(그리니치 표준시) 형식의 날짜 문자열이며 다음과 같이 생성됩니다.

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

var _date = 새로운 날짜();
_date.setDate(_date.getDate() 30);
_date.toGMTString();

위의 세 줄의 코드는 여러 단계로 구분됩니다.

new를 통해 Date 인스턴스를 생성하여 현재 시간을 가져옵니다.

getDate() 메서드는 현재 지역 월의 특정 날짜를 가져온 다음 30일을 더합니다. 이 쿠키가 30일 동안 로컬에 저장될 수 있기를 바랍니다.

그런 다음 setDate() 메소드를 통해 시간을 설정합니다.

마지막으로 toGMTString() 메서드를 사용하여 Date 객체를 문자열로 변환하고 결과를 반환합니다

다음 전체 기능을 사용하여 w3school에서 복사한 쿠키 생성 과정에서 주의해야 할 사항을 설명합니다. 쿠키에 정보를 저장하는 함수를 만듭니다.

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

함수 setCookie(c_name, 값, 만료일){
var exdate=new Date();
exdate.setDate(exdate.getDate() 만료일);
Document.cookie=c_name "=" escape(value) ((expiredays==null) ? "" : ";expires=" exdate.toGMTString());
}
//사용법: setCookie('username','Darren',30)

이제 우리 함수는 일수에 따라 쿠키의 유효 시간을 설정합니다. 다른 단위(예: 시간)로 설정하려면 코드의 세 번째 줄을 변경하세요.

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

exdate.setHours(exdate.getHours() 만료일);

이렇게 설정하면 쿠키 유효 기간은 시간 단위로 적용됩니다.

FAQ에 언급된 쿠키를 삭제하는 방법에는 두 가지가 있습니다. 지금부터 이야기할 내용은 유효 기간을 만료된 시간으로 설정하여 쿠키를 무효화하는 것입니다. 이제 유효기간을 설정할 수 있는 방법이 생겼으니 관심 있는 친구들이 직접 설정해 보도록 하세요^_^. 쿠키에 대한 좀 더 심층적인 주제를 계속 다루겠습니다.

쿠키 고급편

1. 쿠키 경로 개념

기본 지식에서는 쿠키가 도메인과 경로의 개념을 가지고 있다고 언급했습니다. 이제 쿠키에서 경로의 역할을 소개하겠습니다.

쿠키는 일반적으로 사용자가 페이지를 방문할 때 생성되지만, 이 쿠키는 쿠키가 생성된 페이지에서만 접근할 수 있는 것은 아닙니다.

기본적으로 쿠키를 생성한 페이지와 동일한 디렉터리 또는 하위 디렉터리에 있는 웹 페이지만 접근할 수 있습니다. 이는 보안상의 이유로 인해 모든 페이지가 다른 페이지에서 생성된 쿠키에 자유롭게 접근할 수 있는 것은 아닙니다. 예:

"http://www.jb51.net/Darren_code/" 페이지에 쿠키를 생성하면 "/Darren_code/" 경로 아래의 페이지는 "http://www.jb51.net/"과 같습니다. Darren_code /archive/2011/11/07/Cookie.html" 이 페이지는 기본적으로 쿠키 정보를 얻을 수 있습니다.

기본적으로 "http://www.jb51.net" 또는 "http://www.jb51.net/xxxx/"에서는 이 쿠키에 액세스할 수 없습니다. (보기만 해도 소용이 없습니다. 연습하면 진실을 알 수 있습니다) ^_^).

따라서 이 쿠키를 다른 디렉터리나 상위 디렉터리에 액세스할 수 있게 만드는 방법은 쿠키 경로를 설정하여 얻을 수 있습니다. 예시는 다음과 같습니다.

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

document.cookie = "이름=값;경로=경로"
document.cookie = "이름=값;만료=날짜;경로=경로"

빨간색 글꼴로 표시된 경로는 쿠키의 경로입니다. 가장 일반적인 예는 쿠키를 디렉터리에 두는 것입니다. 그러면 어떤 하위 페이지에서 쿠키를 생성하든 모든 페이지에서 해당 쿠키에 액세스할 수 있습니다.

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

document.cookie = "이름=Darren;경로=/";

2. 쿠키 도메인 개념

Path는 동일한 도메인 내에서 쿠키에 접근하는 문제를 해결할 수 있습니다. 계속해서 동일한 도메인 간 접근을 구현하는 쿠키의 문제에 대해 이야기해 보겠습니다. 구문은 다음과 같습니다.

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

document.cookie = "이름=값;경로=경로;도메인=도메인";

빨간색 도메인은 쿠키 도메인 세트의 값입니다.

예를 들어 "www.qq.com"과 "sports.qq.com"은 연결된 도메인 이름 "qq.com"을 공유합니다. "sports.qq.com" 아래의 쿠키를 "www. qq.com"에 액세스하려면 쿠키의 도메인 속성을 사용해야 하며 경로 속성을 "/"로 설정해야 합니다. 예:

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

document.cookie = "사용자 이름=Darren;경로=/;도메인=qq.com";

참고: 동일한 도메인 간 접속이어야 합니다. 도메인 값은 기본 도메인이 아닌 다른 도메인 이름으로 설정할 수 없습니다.

3. 쿠키 보안

일반적으로 쿠키 정보는 HTTP 연결을 사용하여 데이터를 전송합니다. 이 전송 방법은 보기 쉽기 때문에 쿠키에 저장된 정보를 도용하기 쉽습니다. 쿠키에 전달된 내용이 중요한 경우 암호화된 데이터 전송이 필요합니다.

따라서 이 쿠키 속성의 이름은 "secure"이고 기본값은 비어 있습니다. 쿠키의 속성이 안전하면 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 = new Date(); //현재 시간 가져오기　
exdate.setDate(exdate.getDate()expirationdays); //만료시간　
document.cookie = c_name "=" //쿠키 이름
escape(value) //쿠키 값 인코딩
((expiredays == 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 cookie = document.cookie; //쿠키 값 가져오기
var cookieLen = cookie.length; //쿠키 길이 가져오기
if (cookieLen > 0) { //쿠키가 비어 있지 않은 경우

var c_start = cookie.indexOf(c_name '='); //쿠키에서 쿠키 값과 일련번호를 찾습니다.
if (c_start > -1) { //쿠키 값이 존재하는 경우
c_start = c_name.length 1; //시퀀스 번호를 시작하는 쿠키 값을 가져옵니다

var c_end = cookie.indexOf(';', c_start); //쿠키 값 끝 시퀀스 번호 가져오기
If (c_end == -1) { //쿠키가 마지막 쿠키일 때
c_end = cookieLen; //쿠키 값 끝 시퀀스 번호를 쿠키 길이로 설정
};

var cookieStr = unescape(cookies.substring(c_start, c_end)) //디코딩된 쿠키 값 가져오기

var cookieObj = cookieStr.split(';'); //쿠키 값 분할

index = ((index == null) ? 0 : index) // 인덱스에 값이 전달되었는지 확인

var goalObj = cookieObj[index] //인덱스 배열
var goalStr = goalObj.split('=');
var getcook = goalStr[1]; //필요한 쿠키 값 가져오기
getcook을 반환하세요;
};
} 그 밖의 {
Console.log('페이지에 쿠키가 없습니다.');
}
};

alert(getCookie('test', 0)); //쿼리 쿠키 값 인쇄