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

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

1433673 次浏览
小开
最佳答案

2019年4月更新

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

转到https://github.com/js-cookie/js-cookie，并使用不依赖于jQuery的库。

基本示例：

// Set a cookieCookies.set('name', 'value');
// Read the cookieCookies.get('name') => // => 'value'

有关详细信息，请参阅github上的文档。

2019年4月前（旧）

参见插件：

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

然后你可以这样做：

$.cookie("test", 1);

删除：

$.removeCookie("test");

此外，要在cookie上设置一定天数（此处为10）的超时：

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

如果省略过期选项，则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月）：

如下面的评论所述，开发原始插件的团队已经在一个新项目（https://github.com/js-cookie/js-cookie）中删除了jQuery依赖项，该项目具有与jQuery版本相同的功能和通用语法。显然，原始插件不会去任何地方。

小开

您可以使用此处提供的插件…

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

然后写一个cookie做$.cookie("test", 1);

访问设置cookie do$.cookie("test");

小开

没有必要特别使用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);}

看一下

小开

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

小开 
<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)

你可以像这样得到饼干

getCookie('test');

最后你可以像这样擦掉饼干

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

谢谢。Vicky

小开

确保不要做这样的事情：

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

然后，如果cookie不存在，调试器将返回一些无用的消息，例如“. cookie not a函数”。

总是先声明，然后在检查null后进行拆分。像这样：

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

我认为弗雷泽给了我们很好的方法，但有一个错误：

    <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将立即过期：）

小开

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

你可以像这样设置和获取饼干 

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

这是我使用的全局模块-

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

以下是使用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=/;";
小开

我认为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)
小开

如何使用它？

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

可用选项：

到期：定义cookie的生命周期。值可以是数字（将被解释为创建后的几天）或日期对象。如果省略，cookie是会话cookie。

路径：定义cookie有效的路径。默认情况下，cookie的路径是创建cookie的页面的路径（标准浏览器行为）。如果您想让它在整个页面上可用，请使用路径：'/'。

域：创建cookie的页面域。

安全：默认值：false。如果为true，则cookie传输需要安全协议（https）。

原始：默认情况下，cookie在创建/读取时使用编码URIComponent/解码URIComponent进行编码/解码。通过设置原始：true关闭。

小开

我知道有很多很好的答案。通常，我只需要阅读cookie，我不想通过加载额外的库或定义函数来增加开销。

这是如何在一行javascript中读取cookie。我在Guilherme Rodrigue的博客文章中找到了答案：

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

这读取名为key的cookie，漂亮，干净和简单。

小开

尝试（doc这里，SO代码段不起作用，因此运行这一个）

document.cookie = "test=1"             // setdocument.cookie = "test=1;max-age=0"   // unset
小开

以下代码将删除当前域中的所有cookie和所有尾随子域（www.some.sub.domain.com、.some.sub.domain.com、.sub.domain.com等）。

单行vanilla JS版本（不需要jQuery）：

document.cookie.replace(/(?<=^|;).+?(?=\=|;|$)/g, name => location.hostname.split('.').reverse().reduce(domain => (domain=domain.replace(/^\.?[^.]+/, ''),document.cookie=`${name}=;max-age=0;path=/;domain=${domain}`,domain), location.hostname));

这是这一行的可读版本：

document.cookie.replace(/(?<=^|;).+?(?=\=|;|$)/g,name => location.hostname.split(/\.(?=[^\.]+\.)/).reduceRight((acc, val, i, arr) => i ? arr[i]='.'+val+acc : (arr[i]='', arr), '').map(domain => document.cookie=`${name}=;max-age=0;path=/;domain=${domain}`));
小开

我知道，已经有很多答案了，但这里有一个有#0、#1、#2都是香草味的并且很好地放入了全局参考：

window.cookieMonster = window.cookieMonster ||{// https://stackoverflow.com/a/25490531/1028230get: function (cookieName) {var b = document.cookie.match('(^|;)\\s*' + cookieName + '\\s*=\\s*([^;]+)');return b ? b.pop() : '';},
delete: function (name) {document.cookie = '{0}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'.replace('{0}', name);},
set: function (name, value) {document.cookie ='{0}={1};expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/;SameSite=Lax'.replace('{0}', name).replace('{1}', value);}};

注意获取regex的cookie取自这个问题的答案在另一个城堡里。

让我们测试一下：

cookieMonster.set('chocolate', 'yes please');cookieMonster.set('sugar', 'that too');
console.log(cookieMonster.get('chocolate'));console.log(document.cookie);
cookieMonster.delete('chocolate');
console.log(cookieMonster.get('chocolate'));console.log(document.cookie);

如果你在尝试之前没有饼干，应该给你…

yes pleasechocolate=yes please; sugar=that too
sugar=that too

请注意，饼干的持续时间并不长，但从我们的角度来看，基本上是这样的。你可以很容易地通过查看这里的字符串或其他答案来弄清楚如何更改日期。

小开

与之前的答案相比，减少操作次数，我使用以下内容。

function setCookie(name, value, expiry) {let d = new Date();d.setTime(d.getTime() + (expiry*86400000));document.cookie = name + "=" + value + ";" + "expires=" + d.toUTCString() + ";path=/";}
function getCookie(name) {let cookie = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');return cookie ? cookie[2] : null;}
function eatCookie(name) {setCookie(name, "", -1);}
小开

背景

Cookies最初是由网景公司发明的，用于给网络服务器和浏览器提供“内存”。HTTP协议安排将网页传输到浏览器，以及浏览器向服务器请求页面，它是无状态的，这意味着一旦服务器将页面发送给请求它的浏览器，它就不会记住任何关于它的事情。因此，如果您第二次、第三次、第一百次或百万次访问同一网页，服务器会再次认为它是您第一次访问它。

这在很多方面都很烦人。服务器无法记住您在访问受保护页面时是否标识了自己，它无法记住您的用户偏好，它无法记住任何东西。个性化一发明，这就成了一个主要问题。

Cookie就是为了解决这个问题而发明的。还有其他方法可以解决这个问题，但Cookie易于维护且用途广泛。

Cookie如何工作

cookie只不过是存储在浏览器中的一个小文本文件。它包含一些数据：

  • 包含实际数据的名称-值对
  • 过期日期过期后不再有效的日期
  • 它应该发送到的服务器的域和路径

示例

要使用Javascript设置或取消设置cookie，您可以执行以下操作：

// Cookiesfunction createCookie(name, value, days) {if (days) {var date = new Date();date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));var expires = "; expires=" + date.toGMTString();}else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";}
function readCookie(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;}function setCookie(name, days) {createCookie(name, name, days);}function unsetCookie(name) {createCookie(name, "", -1);}

您可以像下面这样访问，

setCookie("demo", 1); // to set new cookie
readCookie("demo"); // to retrive data from cookie
unsetCookie("demo"); // will unset that cookie

提交答案