[javascript] jQuery로 쿠키를 설정 / 설정 해제하는 방법

jQuery를 사용하여 쿠키를 설정 및 설정 해제하는 방법은 무엇입니까? 예를 들어 이름이 지정된 쿠키를 만들고 test값을 1?



답변

2019 년 4 월 업데이트

쿠키 읽기 / 조작에는 jQuery가 필요하지 않으므로 아래의 원래 답변을 사용하지 마십시오.

대신 https://github.com/js-cookie/js-cookie로 이동하여 jQuery에 의존하지 않는 라이브러리를 사용하십시오.

기본 예 :

// Set a cookie
Cookies.set('name', 'value');

// Read the cookie
Cookies.get('name') => // => 'value'

자세한 내용은 github의 문서를 참조하십시오.


플러그인을 참조하십시오 :

https://github.com/carhartl/jquery-cookie

그런 다음 다음을 수행 할 수 있습니다.

$.cookie("test", 1);

지우는 것:

$.removeCookie("test");

또한 쿠키에서 특정 일 수 (10 일)의 시간 초과를 설정하려면 다음을 수행하십시오.

$.cookie("test", 1, { expires : 10 });

expires 옵션을 생략하면 쿠키가 세션 쿠키가되고 브라우저가 종료 될 때 삭제됩니다.

모든 옵션을 다루려면 :

$.cookie("test", 1, {
   expires : 10,           // Expires in 10 days

   path    : '/',          // The value of the path attribute of the cookie
                           // (Default: path of page that created the cookie).

   domain  : 'jquery.com', // The value of the domain attribute of the cookie
                           // (Default: domain of page that created the cookie).

   secure  : true          // If set to true the secure attribute of the cookie
                           // will be set and the cookie transmission will
                           // require a secure protocol (defaults to false).
});

쿠키 값을 다시 읽으려면 :

var cookieValue = $.cookie("test");

쿠키가 현재 경로와 다른 경로에 생성 된 경우 경로 매개 변수를 지정할 수 있습니다.

var cookieValue = $.cookie("test", { path: '/foo' });

업데이트 (2015 년 4 월) :

아래 의견에서 언급했듯이 원래 플러그인을 작업 한 팀은 새 프로젝트 ( https://github.com/js-cookie/js-cookie )와 동일한 기능 및 일반 구문을 가진 jQuery 종속성을 제거 했습니다. jQuery 버전. 분명히 원래 플러그인은 아무데도 가지 않습니다.


답변

특히 쿠키를 조작하기 위해 jQuery를 사용할 필요가 없습니다.

에서 쿼크 모드 (이스케이프 문자 포함)

function createCookie(name, value, days) {
    var expires;

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = encodeURIComponent(name) + "=";
    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, c.length);
        if (c.indexOf(nameEQ) === 0)
            return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

보세요


답변

<script type="text/javascript">
    function setCookie(key, value, expiry) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
    }

    function getCookie(key) {
        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
        return keyValue ? keyValue[2] : null;
    }

    function eraseCookie(key) {
        var keyValue = getCookie(key);
        setCookie(key, keyValue, '-1');
    }

</script>

쿠키를 다음과 같이 설정할 수 있습니다

setCookie('test','1','1'); //(key,value,expiry in days)

쿠키를 다음과 같이 얻을 수 있습니다

getCookie('test');

마지막으로이 쿠키를 지울 수 있습니다

eraseCookie('test');

그것이 누군가에게 도움이되기를 바랍니다 🙂

편집하다:

쿠키를 모든 경로 / 페이지 / 디렉토리로 설정하려면 path 속성을 쿠키로 설정하십시오.

function setCookie(key, value, expiry) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';path=/' + ';expires=' + expires.toUTCString();
}

고마워, vicky


답변

여기에서 사용 가능한 플러그인을 사용할 수 있습니다.

https://plugins.jquery.com/cookie/

쿠키를 작성하려면
$.cookie("test", 1);

설정된 쿠키에 액세스하려면
$.cookie("test");


답변

여기 내가 사용하는 전역 모듈이 있습니다-

var Cookie = {

   Create: function (name, value, days) {

       var expires = "";

        if (days) {
           var date = new Date();
           date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
           expires = "; expires=" + date.toGMTString();
       }

       document.cookie = name + "=" + value + expires + "; path=/";
   },

   Read: function (name) {

        var nameEQ = name + "=";
        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, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }

        return null;
    },

    Erase: function (name) {

        Cookie.create(name, "", -1);
    }

};


답변

다음과 같이하지 마십시오 :

var a = $.cookie("cart").split(",");

그런 다음 쿠키가 존재하지 않으면 디버거는 “.cookie not a function”과 같은 도움이되지 않는 메시지를 반환합니다.

항상 먼저 선언 한 다음 null을 확인한 후 분할을 수행하십시오. 이처럼 :

var a = $.cookie("cart");
if (a != null) {
    var aa = a.split(",");


답변

JavaScript로 쿠키를 설정하는 방법은 다음과 같습니다.

아래 코드는 https://www.w3schools.com/js/js_cookies.asp 에서 가져온 것입니다

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 + ";path=/";
}

이제 아래 함수로 쿠키를 얻을 수 있습니다.

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.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 username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

쿠키를 삭제하려면 expires 매개 변수를 전달 된 날짜로 설정하십시오.

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