JavaScript로 쿠키 코드 읽기 및 쓰기

JavaScript에서 쿠키를 처리하는 것은 악명 높은 인터페이스, 즉 BOM의 document.cookie 속성으로 인해 약간 복잡합니다. 이 속성의 독특한 점은 사용 방법에 따라 다르게 동작한다는 것입니다. 속성 값을 얻는 데 사용되는 경우 document.cookie는 현재 페이지에서 사용 가능한 모든 쿠키의 문자열(쿠키의 도메인, 경로, 만료 시간 및 보안 설정 기반)을 세미콜론으로 구분된 일련의 이름-값 쌍으로 반환합니다. 다음 예와 같이 표시됨:

name1=value1;name2=value2;name3=value3;

1 모든 이름 및 값은 URL 인코딩으로 전달되므로 이를 디코딩하려면 decodeURIComponent()를 사용해야 합니다.

설정에 사용되는 경우 document.cookie 속성을 새 쿠키 문자열로 설정할 수 있습니다. 이 쿠키 문자열은 해석되어 기존 쿠키 컬렉션에 추가됩니다. document.cookie를 설정하면 이름이 지정된 쿠키가 이미 존재하지 않는 한 쿠키를 덮어쓰지 않습니다. 쿠키 설정 형식은 다음과 같습니다. set-Cookie 헤더에 사용된 형식과 동일합니다.

name=value;expiration=expiration_time; path=domian_path

이 매개변수 중 쿠키 이름과 값만 필수입니다. 다음은 간단한 예입니다.

document.cookie = "name=Nicholas";

이 코드는 Nicholas 값을 사용하여 name이라는 쿠키를 생성합니다. 이 쿠키는 클라이언트가 서버에 요청을 보낼 때마다 전송되며 브라우저가 닫히면 삭제됩니다. 이 코드는 괜찮지만 이름이나 값을 인코딩할 필요가 없으므로

encodeURIComponent()를 설정할 때마다 아래 예시와 같이

를 사용하는 것이 가장 좋습니다. ;

　document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas");

　생성된 쿠키에 대한 추가 정보를 지정하려면 매개변수를

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas) ") + "; domain=.wrox.com; path=/";

JavaScript에서 쿠키를 읽고 쓰는 것은 그리 직관적이지 않기 때문에 쿠키의 기능을 단순화하는 일부 기능. 기본 쿠키 작업에는 읽기, 쓰기, 삭제의 세 가지가 있습니다. CookieUtil 개체에는 다음과 같이 표시됩니다.

var CookieUtil = {
    get: function (name) {
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;
        if (cookieStart > -1) {
            var cookieEnd = document.cookie.indexOf(";", cookieStart)
            if (cookieEnd == -1) {
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        }
        return cookieValue;
    },
    set: function (name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
        if (expires instanceof Date) {
            cookieText += "; expires=" + expires.toGMTString();
        }
        if (path) {
            cookieText += "; path=" + path;
        }
        if (domain) {
            cookieText += "; domain=" + domain;
        }
        if (secure) {
            cookieText += "; secure";
        }
        document.cookie = cookieText;
    },
    unset: function (name, path, domain, secure) {
        this.set(name, "", new Date(0), path, domain, secure);
    }
};

CookieUtil.get() 메서드는 쿠키 이름을 기반으로 해당 값을 가져옵니다. 그는 document.cookie 문자열에서 쿠키 이름과 등호를 찾아 이를 수행합니다. 찾은 경우 indexOf()를 사용하여 위치(쿠키의 끝 위치를 나타냄) 뒤의 첫 번째 세미콜론을 찾습니다. 세미콜론이 발견되지 않으면 쿠키가 문자열의 마지막 쿠키이고 도메인 아래의 문자열이 모두 쿠키 값임을 의미합니다. 값은 decodeURIComponent()를 사용하여 디코딩되고 최종적으로 반환됩니다. 쿠키가 발견되지 않으면 null이 반환됩니다.
CookieUtil.set() 메소드는 페이지에 쿠키를 설정하고 여러 매개변수(쿠키 이름, 쿠키 값, 쿠키 삭제 시기를 지정하는 데 사용되는 선택적 날짜 객체, 쿠키 선택적 URL 경로, 선택적 도메인 및 선택적)를 허용합니다. 보안 플래그를 추가할지 여부를 나타내는 부울 값입니다. 매개변수는 사용 빈도에 따라 순서가 지정되며 처음 두 개만 필요합니다. 이 방법에서는 encodeURIComponent()를 사용하여 이름과 값을 모두 URL로 인코딩하고 기타 옵션을 확인합니다. 만료 매개변수가 Date 객체인 경우 Date 객체의 toGMTString() 메서드는 Date 객체의 형식을 올바르게 지정하는 데 사용되며 만료 옵션에 추가됩니다. 이 방법의 다른 부분은 쿠키 문자열을 구성하고 이를 document.cookie에 설정하는 것입니다.
기존 쿠키를 직접 삭제할 수 있는 방법은 없습니다. 따라서 동일한 경로, 도메인, 보안 옵션을 사용하여 쿠키를 다시 설정하고 만료 시간을 과거로 설정하십시오. CookieUtil.unset() 메서드는 이러한 종류의 작업을 처리할 수 있습니다. 삭제할 쿠키 이름, 선택적 경로 매개변수, 선택적 도메인 매개변수, 선택적 보안 매개변수 등 4개의 매개변수를 허용합니다. 이러한 매개변수와 빈 문자열 및 만료 시간을 1970년 1월 1일로 설정(0ms로 초기화된 Date 객체의 값)이 CookieUtil.set()에 전달됩니다. 이렇게 하면 쿠키가 삭제됩니다.
이러한 방법은 다음과 같이 사용할 수 있습니다.

//设置cookie
CookieUtil.set("name", "Nicholas");
CookieUtil.set("book", "Professional <a href="http://www.php1.cn/">JavaScript</a>");
//读值
alert(CookieUtil.get("name"));
alert(CookieUtil.get("book"));
//删除cookie
CookieUtil.unset("name");
CookieUtil.unset("book")
//设置1个cookie，包括它的路径、域、截止日期
CookieUtil.set("name", "Nicholas", "/books/projs/", "www.wrox.com", new Date("January 1, 2010"));
//删除同一cookie
CookieUtil.unset("name", "/books/projs/", "www.wrox.com");
//设置1个<a href="http://www.php1.cn/category/23.html">安全</a>cookie
CookieUtil.set("name", "Nicholas", null, null, null, true);

이러한 방법을 사용하면 쿠키 문자열 구문 분석 및 구성 작업을 처리하여 쿠키를 사용하여 클라이언트 측에 데이터를 저장하는 것이 더 쉬워집니다