如何使用jQuery设置和取消设置cookie，例如创建一个名为test的cookie并将值设置为1?
当前回答
背景
cookie最初是由网景公司发明的，目的是为网络服务器和浏览器提供“内存”。HTTP协议是无状态的，它负责将网页传输到浏览器，以及浏览器对页面的请求发送到服务器，这意味着一旦服务器将页面发送给请求它的浏览器，它就不会记住关于它的任何事情。因此，如果你第二次、第三次、第一百次或第一百万次访问同一个网页，服务器会再次认为这是你第一次访问该网页。
这在很多方面都很烦人。当您想要访问受保护的页面时，服务器无法记住您是否确认了自己的身份，它无法记住您的用户首选项，它无法记住任何东西。个性化一出现，这就成了一个大问题。
饼干的发明就是为了解决这个问题。还有其他方法可以解决这个问题，但cookie易于维护，而且用途广泛。
cookie的工作原理
cookie不过是存储在浏览器中的一个小文本文件。它包含一些数据:
包含实际数据的名称-值对 过期日期，在此之后它将不再有效 应该发送到的服务器的域和路径
例子
使用Javascript设置或取消设置cookie，您可以执行以下操作:
// Cookies
function 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
其他回答
在浏览器中设置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。
我知道，已经有很多答案了，但这里有一个设置，获取和删除所有漂亮的香草，并很好地放入全局引用:
window.cookieMonster = window.cookieMonster ||
{
// https://stackoverflow.com/a/25490531/1028230
get: 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);
}
};
请注意，cookie getting regex是从另一个城堡的一个问题的答案中截取的。
我们来测试一下:
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 please
chocolate=yes please; sugar=that too
sugar=that too
请注意，饼干持续的时间不长，但从我们的角度来看，基本上是这样的。通过查看这里的字符串或其他答案，您可以很容易地了解如何更改日期。
我知道有很多很好的答案。通常，我只需要读取cookie，不希望通过加载额外的库或定义函数来增加开销。
下面是如何在一行javascript中读取cookie。我在Guilherme Rodrigues的博客文章中找到了答案:
('; '+document.cookie).split('; '+key+'=').pop().split(';').shift()
这读取cookie命名为key，漂亮，干净和简单。
不需要特别使用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?
与之前的答案相比，我减少了操作的数量，我使用以下方法。
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);
}
推荐文章
- ReactJS和公共文件夹中的图像
- 在React Native中使用Fetch授权头
- 为什么我的球(物体)没有缩小/消失?
- 如何使用jQuery检测页面的滚动位置
- if(key in object)或者if(object. hasownproperty (key)
- 一元加/数字(x)和parseFloat(x)之间的区别是什么?
- angularjs中的compile函数和link函数有什么区别
- 删除绑定中添加的事件监听器
- 如何在JSON中使用杰克逊更改字段名
- 很好的初学者教程socket.io?
- HtmlSpecialChars在JavaScript中等价于什么?
- HttpOnly cookie如何与AJAX请求一起工作?
- React: 'Redirect'没有从' React -router-dom'中导出
- 如何在React中使用钩子强制组件重新渲染?
- 我如何使用Jest模拟JavaScript的“窗口”对象?
