최신 웹 개발 튜토리얼
 

JavaScript Cookies


Cookies 사용자가 웹 페이지에서 사용자 정보를 저장할 수 있습니다.


무엇 Cookies ?

Cookies 사용자의 컴퓨터에 작은 텍스트 파일에 저장된 데이터입니다.

웹 서버는 브라우저에 웹 페이지를 전송 한 경우, 접속 종료하고, 서버는 사용자에 대한 모든 것을 잊어된다.

Cookies "사용자 정보를 기억하는 방법"문제를 해결하기 위해 발명되었다 :

  • 사용자가 웹 페이지를 방문 할 때, 그의 이름이 저장 될 수있는 cookie .
  • 사용자가 페이지를 방문 다음 번 cookie 그의 이름을 "기억".

쿠키는 같은 이름 - 값 쌍에 저장됩니다 :

username = John Doe

서버에서 브라우저 요청 된 웹 페이지는 경우 cookies 페이지에 속하는 요청에 부가된다. 이러한 방식으로, 서버는 사용자에 대한 정보를 "기억"하는 데 필요한 데이터를 얻는다.


만들기 a Cookie 자바 스크립트를

자바 스크립트 작성, 읽기, 삭제할 수 있습니다 cookiesdocument.cookie 속성입니다.

자바 스크립트, a cookie 다음과 같이 만들 수 있습니다 :

document.cookie = "username=John Doe";

또한 (UTC 시간) 유효 기간을 추가 할 수 있습니다. 기본적으로, the cookie 브라우저가 종료 될 때 삭제된다 :

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

경로 매개 변수를 사용하면 어떤 경로를 브라우저 말할 수있는 the cookie 속해있다. 기본적으로, the cookie 현재 페이지에 속한다.

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

읽기 a Cookie 자바 스크립트를

자바 스크립트, cookies 다음과 같이 읽을 수 있습니다 :

var x = document.cookie;

document.cookie 모든 반환 cookies 훨씬 같은 하나의 문자열 : cookie1=value; cookie2=value; cookie3=value; cookie1=value; cookie2=value; cookie3=value;


변경 a Cookie 자바 스크립트를

자바 스크립트를 사용하면 변경할 수 있습니다 a cookie 당신이 그것을 만들 때 같은 방법 :

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

오래된 cookie 덮어 씁니다.


삭제 a Cookie 자바 스크립트를

삭제 a cookie 매우 간단합니다. 그냥이 전달 된 날짜 매개 변수를 만료 설정 :

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

당신이 지정할 필요는 없습니다 a cookie 삭제하면 값을 a cookie .


Cookie 문자열

document.cookie 속성은 일반 텍스트 문자열처럼 보인다. 그러나 그것은 아니다.

당신은 전체 쓰기해도 cookie 할 문자열 document.cookie 다시 그것을 읽을 때, 당신은 단지 그것의 이름 - 값 쌍을 볼 수 있습니다.

새 설정하면 cookie , 이전 cookies 덮어 쓰지 않습니다. 새로운 cookie 추가됩니다 document.cookie 읽고 있다면, 그래서 document.cookie 다시 당신이 뭔가를 얻을 것이다 :

cookie1 = value; cookie2 = value;

하나 지정의 값 찾으려면 cookie , 당신은 검색 자바 스크립트 함수 작성해야 cookie 가치 cookie 문자열입니다.


자바 스크립트 Cookie

수행 할 수있는 예를 들어, 우리는 만들 a cookie 방문자의 이름을 저장합니다.

방문자가 웹 페이지에 도착 처음으로, 그는 자신의 이름을 입력하라는 메시지가 표시됩니다. 이름은 다음에 저장된 a cookie .

방문자가 같은 페이지에 도착 다음에, 그는 환영 메시지가 표시됩니다.

예를 들어 우리는 3 자바 스크립트 함수를 생성합니다 :

  1. 함수는 설정 cookie 값을
  2. 함수는 얻을 cookie 값을
  3. 함수는 확인 cookie 값을

함수는 설정하는 a Cookie

첫째, 우리의 방문자의 이름을 저장하는 기능을 만들 a cookie 변수를 :

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

예 설명 :

함수의 매개 변수는 위의 이름입니다 cookie (cname) 의 값 the cookie (cvalue) , 및 쿠키 (exdays)을 만료해야 할 때까지의 일 수.

함수 설정 a cookie 함께 가산함으로써 cookiename , the cookie 값 및 문자열 만료.


함수는 가져 오기 a Cookie

그 후, 우리는 소정의 값을 리턴하는 함수 생성 cookie :

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}

기능 설명 :

가지고 the cookiename 매개 변수 (CNAME) 등을.

(+ CNAME "=")를 검색 할 텍스트 변수 (이름)를 만듭니다.

분할 document.cookie 배열 호출에 세미콜론에 ca (ca = document.cookie.split(';')) .

하여 CA를 통해 루프 array (i=0;i<ca.length;i++) , 각 값 판독 c=ca[i]) .

경우 the cookie 발견된다 (c.indexOf(name) == 0) 의 값을 반환 the cookie (c.substring(name.length,c.length) .

경우 the cookie 발견되지 ","반환합니다.


함수는 확인하는 a Cookie

마지막으로, 우리는 함수 생성 checks 하는 경우 a cookie 설정된다.

경우 the cookie 설정이 인사말을 표시합니다.

경우 the cookie 설정되어 있지 않은, 사용자의 이름을 요청하는 프롬프트 상자가 표시되며, 사용자 이름 저장 cookie 호출하여 365 일 동안 setCookie 기능 :

function checkCookie() {
    var username=getCookie("username");
    if (username!="") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

모두 함께 지금

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}
»그것을 자신을 시도

이 예는 위의 실행 checkCookie() 페이지가로드 될 때 기능.