如何使用jQuery设置和取消设置cookie,例如创建一个名为test的cookie并将值设置为1?


当前回答

我认为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;
        }

设置cookie:

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

其他回答

不需要特别使用jQuery来操作cookie。

来自QuirksMode(包括转义字符)

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和cookies?

在浏览器中设置cookie的简单示例:

<!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>

简单的只是复制/粘贴并使用此代码设置您的cookie。

如何使用它?

//To set a cookie
$.cookie('the_cookie', 'the_value');

//Create expiring cookie, 7 days from then:
$.cookie('the_cookie', 'the_value', { expires: 7 });

//Create expiring cookie, valid across entire page:
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

//Read cookie
$.cookie('the_cookie'); // => 'the_value'
$.cookie('not_existing'); // => null

//Delete cookie by passing null as value:
$.cookie('the_cookie', null);

// Creating cookie with all availabl options
$.cookie('myCookie2', 'myValue2', { expires: 7, path: '/', domain: 'example.com', 
         secure: true, raw: true });

可用的选项:

expires:定义cookie的生存时间。Value可以是一个Number(将被解释为从创建时间到日期的天数)或一个Date对象。如果省略,则该cookie为会话cookie。

path:定义cookie有效的路径。默认情况下,cookie的路径是创建cookie的页面的路径(标准的浏览器行为)。如果你想让它在整个页面都可用,使用路径:'/'。

domain:创建cookie的页面域。

secure:默认值:false。如果为真,则cookie传输需要安全协议(https)。

raw:默认情况下,cookie在创建/读取时使用encodeURIComponent/ decodeURIComponent进行编码/解码。通过设置raw: true关闭。

确保不要做这样的事情:

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

然后,如果cookie不存在,调试器将返回一些无用的消息,如“。Cookie不是一个函数”。

总是先声明,然后在检查null后进行拆分。是这样的:

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

我认为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;
        }

设置cookie:

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