如何使用jQuery设置/取消cookie？

Question

如何使用jQuery设置和取消cookie，例如创建名为test的cookie并将其值设置为1？

- omg

Answer 1

2019年4月更新

读取/操作cookie时不需要使用jQuery，请勿使用下面的原始答案。

请前往https://github.com/js-cookie/js-cookie，使用那里的库，该库不依赖于jQuery。

基本示例：

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

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

请查看Github上的文档了解详情。

---

2019年4月之前（旧版）

请查看插件：

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

然后您可以执行以下操作：

$.cookie("test", 1);

删除：

$.removeCookie("test");

此外，要在cookie上设置一个特定天数的超时时间（这里是10天）：

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

如果省略了expires选项，那么cookie就成为会话cookie，并在浏览器退出时被删除。

为涵盖所有选项：

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

读取cookie的值：

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

更新（2015年4月）：

如下方评论所述，原插件团队已在一个新项目中移除了jQuery依赖项（https://github.com/js-cookie/js-cookie），该项目具有与jQuery版本相同的功能和通用语法。但原插件好像并没有消失。

- Alistair Evans

---

@Kazar 我花了6个小时，没有休息。今天早上我终于意识到问题了。我在使用PhoneGap时，在网站上工作时没有任何问题，但是在设备上，当您尝试检索包含JSON的cookie时，它已经是一个对象，因此如果您尝试对其进行JSON.parse，它会产生JSON解析错误。通过使用 "if typeof x == 'string'" 进行JSON.parse，否则就直接使用该对象来解决这个问题。看了六个小时，在所有错误的地方寻找错误。 - Andrei Cristian Prodan

在删除cookie时，请确保将路径设置为与最初设置cookie的路径相同：$.removeCookie('nameofcookie', { path: '/' }); - LessQuesar

现在是2015年，仅从这个答案中，我们每周仍然会在jquery-cookie代码库中获得超过2千个独立的点击量。从中我们可以学到以下几点：1. cookie技术不会很快过时；2. 人们仍然在谷歌搜索“用jquery插件拯救世界”。处理cookie时不一定需要使用jQuery，jquery-cookie正在更名为js-cookie（https://github.com/js-cookie/js-cookie），版本1.5.0中jquery依赖已变成可选项，将有一个2.0.0版本带来更多的有趣内容，非常值得关注和贡献，谢谢！ - Fagner Brack

@Kazar 我们没有计划对其进行物理搬迁，从多个来源到达该URL的总流量相当大，Klaus 是 "jquery-cookie" 命名空间的历史所有者。这个 URL 不会很快消失，不需要担心。但我仍然鼓励每个人开始关注新存储库以获取更新。 - Fagner Brack

@AlistairEvans var cookieValue = $.cookie("test", { path: '/foo' }); 不起作用。它设置了一个根路径的 cookie，其中包含一个 JSON 对象 { path: '/foo' }，并返回 cookie 格式化字符串 "test=%5Bobject%20Object%5D"。请删除此错误代码。不幸的是，jQuery-Cookie 没有一种在不同路径中检索 cookie 的方法，我也没有看到 JS-Cookie 中的任何更新。 - ADTC

Answer 2

没有必要特别使用jQuery来操作cookies。

来自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删除现有的类名并添加新的类名？

- Russ Cam

---

嗨Russ，jQuery Cookie的好处在于它可以转义数据。 - Svetoslav Marinov

@lordspace - 只需将值包装在window.escape / unescape中，分别编写/检索cookie值即可 :) - Russ Cam

更好的cookie代码可以在这里找到：https://developer.mozilla.org/en/DOM/document.cookie - SDC

jQuery cookie插件更简单。 - brauliobo

这个解决方案行不通，encodeURIComponent 可能会错误地编码 RFC 6265 中允许在 cookie 值或 cookie 名称中使用的字符：https://github.com/js-cookie/js-cookie/pull/20#issuecomment-94453407。这可能会导致使用第三方解决方案删除 cookie 时出现问题，因为这些解决方案期望 cookie 名称中有一些字符没有被编码。 - Fagner Brack

Answer 3

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

您可以像这样设置cookie

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

您可以像这样获取cookies

getCookie('test');

最后，您可以像这样擦除cookie

eraseCookie('test');

希望对某些人有所帮助 :)

编辑：

如果您想将 cookie 设置为所有路径/页面/目录，则将 path 属性设置为 cookie

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

谢谢，维基

- Vignesh Pichamani

---

60 * 1000 = 60秒 60 * (60 * 1000) = 60分钟，即1小时 24 * (60 * (60 * 1000)) = 1天，即24小时。希望这有所帮助。 - Vignesh Pichamani

1 * 24 * 60 * 60 * 1000 可以自定义为1天，或者您也可以使用365。 - Vignesh Pichamani

好的函数...但是它们为什么在document.ready标签内？ - Dss

这不适用于Safari或IE中ASCII范围之外的任何字符，例如é，北等。此外，对于一些不允许在cookie名称或cookie值中使用的特殊字符，这也不起作用。我建议参考以下内容：http://tools.ietf.org/html/rfc6265 - Fagner Brack

最优秀的答案 - Kolawole Emmanuel Izzy

Answer 4

您可以在这里使用可用的插件。

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

然后写入 cookie：

$.cookie("test", 1);

访问该设置的 cookie：

$.cookie("test");

- user177016

---

有更新版本的插件。 - Andrei Cristian Prodan

Answer 5

这是我使用的全局模块 -

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

};

- seanjacob

Answer 6

请确保不要做这样的事情：

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

如果 cookie 不存在，调试器会返回一些无用的消息，例如“.cookie not a function”。

在检查是否为 null 之后，始终先声明，然后再执行分割操作。像这样：

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

- user890332

---

示例代码不完整。是只有一个 } 缺失还是有几行代码缺失？ - Peter Mortensen

只缺少一个 }，但显然你需要添加更多代码行来继续使用分裂所需做的事情。 - user890332

Answer 7

以下是如何使用JavaScript设置cookie的方法：

下面的代码来自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=/";
}

现在您可以使用以下函数获取cookie：

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

最后，这是如何检查cookie：

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

如果您想删除cookie，只需将过期参数设置为一个过去的日期即可：

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

- S1awek

Answer 8

在您的浏览器中设置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。

- Webpixstudio

---

请注意默认情况下，浏览器根据资源的文件名来缓存。在本例中，当文件名更新为jquery-1.9.1.min.js时，对于每个人jquery-1.9.0.min.js都将重新加载，否则浏览器不会发出任何请求以检查更新的内容。如果您更新了jquery.cookie.js内的代码而没有更改它的文件名，则已经缓存了 jquery.cookie.js 资源的浏览器可能不会重新加载它。 - Fagner Brack

如果您正在编写网站并复制/粘贴此内容，请注意，如果您更新jquery.cookie.js版本而不更改其文件名（除非您的服务器使用E-Tags处理缓存），否则此方法将无法正常工作。 - Fagner Brack

如果 ($.cookie('cookieStore')) { var data=JSON.parse($.cookie("cookieStore")); // 当在不同页面加载页面时找不到 $('#name').text(data[0]); $('#address').text(data[1]); } - Mohammad Javad

Answer 9

您可以在Mozilla网站上使用该库这里

您可以像这样设置和获取cookies

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

- Moustafa Samir

Answer 10

我认为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"，否则cookie将立即过期 :)

- barmyman

---

"value" 可以是一个字符串。在问题中，他使用1作为例子。 Value 应该等于键所等于的值，而不是 cookie 过期前的天数长度。如果将 "foo" 作为值传入，则你的版本会崩溃。 - Peter