JavaScript 쿠키

쿠키를 통해 사용자의 웹 브라우저에 정보를 저장할 수 있습니다.

쿠키는 무엇인가요?

쿠키는 사용자 컴퓨터에 작은 텍스트 파일로 저장되어 사용자 컴퓨터에 일정량의 데이터를 저장할 수 있습니다. (약4KB).

웹 서버가 웹 페이지를 브라우저로 보낼 때마다 연결이 닫히고, 서버는 사용자에 대한 모든 정보를 잊습니다.

쿠키를 통해 '사용자에 대한 정보를 어떻게 기억할 수 있을까'라는 문제를 해결하기 위해 발명되었습니다.

쿠키는 정보를 추적할 수 있으며, 예를 들어 사용자의 취향을 추적할 수 있습니다. 사용자가 다음에 웹 사이트를 방문할 때, 웹 사이트는 페이지를 개인화하기 위해 이 정보를 검색할 수 있습니다.

쿠키는 '이름=값' 형식의 쌍으로 저장됩니다. 예를 들어:

username = Seagull

브라우저가 서버에서 웹 페이지를 요청할 때, 해당 페이지의 쿠키가 요청에 추가됩니다. 이렇게 하면 서버가 사용자에 대한 정보를 '기억'하기 위해 필요한 데이터를 얻을 수 있습니다.

JavaScript를 사용하여 쿠키를 생성합니다

JavaScript에서는 다음과 같이 사용할 수 있습니다document.cookie속성을 사용하여 쿠키를 생성, 읽고 제거할 수 있습니다.

이렇게 쿠키를 생성할 수 있습니다:

　　document.cookie = "username=Seagull";

또한 UTC 시간으로 설정된 만료 날짜를 추가할 수 있습니다. 기본적으로, 브라우저를 닫을 때 쿠키가 제거됩니다:

　　document.cookie = "username=Seagull; expires=Mon,　25　Mar　2019　12:00:00 UTC";

path 파라미터를 사용하면, 브라우저에 쿠키가 해당 경로에 속하는지를 알려줄 수 있습니다. 기본적으로, 쿠키는 현재 페이지에 속합니다:

　　document.cookie = "username=Seagull; expires=Mon,　25　Mar　2019　12:00:00 UTC; path=/";

JavaScript를 사용하여 쿠키를 읽습니다

JavaScript에서는 이렇게 쿠키를 읽을 수 있습니다:

　　var x = document.cookie;

쿠키를 읽는 것은 약간 복잡합니다. 왜냐하면 이document.cookie속성은 쿠키를 포함한 모든 쿠키를 구분자로 나눈 문자열로 반환합니다. 예를 들어, 名称=值对, 예cookie1 = value; cookie2 = value; cookie3 = value)을 이용하여 이 목록에서 단일 쿠키를 가져올 수 있습니다.split()이를 단일 name = value 쌍으로 나누고 특정 이름을 검색하면 됩니다.

이 문자열은 expires, path, domain 등과 같은 속성을 포함하지 않으며, Cookie 집합에 포함될 수 있습니다.

JavaScript를 사용하여 쿠키를 변경합니다

쿠키를 변경하거나 수정하는 유일한 방법은 기존 쿠키와 같은 name을 가진 다른 쿠키를 생성하는 것입니다.

　　document.cookie = "username=Ankit; expires=Mon,　25　Mar　2019　12:00:00 UTC; path=/";

주의:같은 name을 가진 다른 쿠키 path를 생성하면 기존 쿠키는 변경되지 않고 추가적인 쿠키가 추가됩니다.

JavaScript를 사용하여 쿠키를 제거합니다

쿠키를 제거하는 것은 매우 쉽습니다. 쿠키를 제거하려면:

• 다시 같은 설정 name을 사용하여 빈 값을 지정하면 됩니다

• 또는 expires 파라미터를 지나간 날짜로 설정하십시오

　　document.cookie = "username=; expires=Thu, 01　Jan　1970 00:00:00 UTC; path=/";

기억해 주세요. path를 쿠키로 지정하거나 다른 속성이 있으면, 그것도 제거할 때 포함해야 합니다.

JavaScript Cookie 예제

아래의 예제에서 우리는 이름을 저장하는 cookie를 생성합니다。

사용자가 첫 번째로 이 웹 페이지에 방문할 때/그녀는 그녀의 이름을 입력합니다. 그런 다음 그 이름을 cookie에 저장합니다。

다음 사용자가 동일한 페이지에 다시 방문할 때/그녀는 저장된 cookie의 값을 얻습니다。

예제로, 우리는 다음과 같이 생성합니다2JavaScript 함수를 정의합니다：

• cookie 값 설정 기능

• Cookie 값 가져오는 함수

cookie 저장

먼저, 우리는 방문자의 이름을 cookie 변수에 저장하는 함수를 생성합니다。

function setCookie(cname, cvalue) {
　　var now = new Date();
　　now.setMonth(now.getMonth()　+　1);
　　var expires = "expires=";+　now.toUTCString();
　　document.cookie = cname;　+　"=="　+　cvalue　+　";　+　expires　+　";path=/";
}

기능 설명：

위 함수의 매개변수는 cookie의 이름 (cname)과 cookie의 값 (cvalue)입니다。

이 함수는 cookie 이름, cookie 값, expires 문자열 (1월을 더해 cookie를 설정합니다。

cookie 읽기

그런 다음, 우리는 특정 cookie 값을 표시하는 함수를 생성합니다。

function getCookie(cname) {
　　var allcookies = document.cookie;
　　cookieArr = allcookies.split(';');
　　for(var i = 0; i < cookieArr.length; i++) {
　　　　　var cookiePair = cookieArr[i].split("=");
　　　　　if(cname == cookiePair[0].trim()) {
　　　　　　　　document.write("키는:"　+　cookiePair[0]　+　"과 Value는:"　+　cookiePair[1]);
　　　　　}
　　}
}

함수 설명：

이 함수는 cookie 이름을 매개변수로 사용합니다 (cname)。

모든 cookie를 가져옵니다 (allcookies = document.cookie）。

document.cookie의 분호점을 cookieArr 배열로 분할합니다 (cookieArr = allcookies.split（';'））。

cookieArr 배열을 순회합니다 (i = 0; i <cookieArr.length; i ++])을 작성하고 각 값을 읽어옵니다 (cookiePair = cookieArr [i]）。

cookie를 찾았다면 (cname == cookiePair [0])，cookie의 키와 값 (cookiePair [0]，cookiePair [1]）。

합쳐서

function setCookie(cname, cvalue) {
　　var now = new Date();
　　now.setMonth(now.getMonth()　+　1);
　　var expires = "expires=";+　now.toUTCString();
　　document.cookie = cname;　+　"=="　+　cvalue　+　";　+　expires　+　";path=/";
}
function getCookie(cname) {
　　var allcookies = document.cookie;
　　cookieArr = allcookies.split(';');
　　for(var i = 0; i < cookieArr.length; i++) {
　　　　　var cookiePair = cookieArr[i].split("=");
　　　　　if(cname == cookiePair[0].trim()) {
　　　　　　　　　　　document.write("키는:"　+　cookiePair[0]　+　"과 Value는:"　+　cookiePair[1]);
　　　　　}
　　}
}

쿠키 속성을 가지고 있습니다.

쿠키는5개 속성의 텍스트 데이터 레코드: