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);
}

보세요

• 기존 클래스 이름을 제거하고 jQuery 및 쿠키를 사용하여 새 클래스 이름을 추가하려면 어떻게합니까?

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

브라우저에서 쿠키를 설정하는 간단한 예 :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jquery.cookie Test Suite</title>

        <script src="jquery-1.9.0.min.js"></script>
        <script src="jquery.cookie.js"></script>
        <script src="JSON-js-master/json.js"></script>
        <script src="JSON-js-master/json_parse.js"></script>
        <script>
            $(function() {

               if ($.cookie('cookieStore')) {
                    var data=JSON.parse($.cookie("cookieStore"));
                    $('#name').text(data[0]);
                    $('#address').text(data[1]);
              }

              $('#submit').on('click', function(){

                    var storeData = new Array();
                    storeData[0] = $('#inputName').val();
                    storeData[1] = $('#inputAddress').val();

                    $.cookie("cookieStore", JSON.stringify(storeData));
                    var data=JSON.parse($.cookie("cookieStore"));
                    $('#name').text(data[0]);
                    $('#address').text(data[1]);
              });
            });

       </script>
    </head>
    <body>
            <label for="inputName">Name</label>
            <br /> 
            <input type="text" id="inputName">
            <br />      
            <br /> 
            <label for="inputAddress">Address</label>
            <br /> 
            <input type="text" id="inputAddress">
            <br />      
            <br />   
            <input type="submit" id="submit" value="Submit" />
            <hr>    
            <p id="name"></p>
            <br />      
            <p id="address"></p>
            <br />
            <hr>  
     </body>
</html>

간단히 쿠키를 복사 / 붙여 넣기하고이 코드를 사용하여 쿠키를 설정하십시오.

여기 에서 Mozilla 웹 사이트의 라이브러리를 사용할 수 있습니다

이와 같은 쿠키를 설정하고 얻을 수 있습니다

docCookies.setItem(name, value);
docCookies.getItem(name);

Fresher가 우리에게 좋은 길을 주었다고 생각하지만 실수가 있습니다.

    <script type="text/javascript">
        function setCookie(key, value) {
            var expires = new Date();
            expires.setTime(expires.getTime() + (value * 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;
        }
   </script>

getTime () 근처에 "value"를 추가해야합니다. 그렇지 않으면 쿠키가 즉시 만료됩니다 :)

나는 생각했다 Vignesh Pichamani 의 답변이 가장 간단하고 깨끗 . 만기일 수를 설정하는 기능을 추가하기 만하면됩니다.

편집 : 일 번호가 설정되지 않은 경우 '만료되지 않음'옵션도 추가되었습니다.

        function setCookie(key, value, days) {
            var expires = new Date();
            if (days) {
                expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
                document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
            } else {
                document.cookie = key + '=' + value + ';expires=Fri, 30 Dec 9999 23:59:59 GMT;';
            }
        }

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

쿠키를 설정하십시오.

setCookie('myData', 1, 30); // myData=1 for 30 days. 
setCookie('myData', 1); // myData=1 'forever' (until the year 9999) 

나는 많은 훌륭한 답변이 있다는 것을 알고 있습니다. 종종 쿠키 만 읽을 필요가 있으며 추가 라이브러리를로드하거나 함수를 정의하여 오버 헤드를 생성하고 싶지 않습니다.

다음은 한 줄의 자바 스크립트에서 쿠키를 읽는 방법 입니다. Guilherme Rodrigues의 블로그 기사 에서 답을 찾았습니다 .

('; '+document.cookie).split('; '+key+'=').pop().split(';').shift()

이 쿠키는 key멋지고 깨끗하며 단순합니다.

$.cookie("test", 1); //set cookie
$.cookie("test"); //get cookie
$.cookie('test', null); //delete cookie