饼干 Java脚本：设置、获取和删除示例
詹姆斯·哈特曼
⚡ 智能摘要
饼干 Java脚本会在访问者的计算机上存储小型键值对，以便无状态 HTTP 连接能够记住信息。本文解释了如何设置、读取和删除 cookie，描述了每个 cookie 属性，并将 cookie 与浏览器存储替代方案进行了比较。
什么是 Cookies？
Cookie 是一小段存储在您电脑上的数据，供您的浏览器访问。您可能已经有意或无意地享受过 Cookie 带来的好处。例如，您是否曾经为了避免每次登录都重新输入个人信息而保持登录状态，比如登录 Facebook？如果是，那么您就使用了 Cookie。Cookie 以键值对的形式保存。
重要说明：Cookie 并不存储您的密码。它存储的是会话标识符，这是服务器在您成功登录后生成的随机令牌。服务器会将该令牌与您的帐户进行匹配，因此密码本身永远不会离开服务器。
为什么需要 Cookie？
之间的沟通 网页浏览器 服务器使用名为 HTTP 的无状态协议进行通信。无状态协议独立处理每个请求，因此服务器在将数据发送给浏览器后不会保留数据。但在许多情况下，用户可能再次需要这些数据。这时，Cookie 就派上了用场。有了 Cookie，浏览器无需每次都与服务器通信，而是可以直接从计算机获取数据。
典型用途包括记住已登录会话、存储语言或主题偏好、保持ping 商店里的物品ping 页面间的购物车，以及首次访问者与回头客的统计。
Javascript 饼干套装
您可以使用 document.cookie 属性创建 cookie，如下所示。
document.cookie = "cookiename=cookievalue"
您甚至可以为 Cookie 设置过期日期，以便在指定日期将 Cookie 从计算机中删除。过期日期应以 UTC/GMT 格式设置。如果您未设置过期日期，则 Cookie 将在用户关闭浏览器时被删除。
document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC"
您还可以设置域名和路径，以指定 cookie 所属的域名以及该域名下的哪些目录。默认情况下，cookie 属于设置它的页面。
document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC; path=/ "
//创建一个 cookie，其域为当前页面，路径覆盖整个域。
⚠️警告： 过期日期必须在未来。如果过期日期已过，浏览器会立即删除 cookie，这与下文删除部分所使用的技术完全相同。
Java脚本获取 Cookie
你可以像这样访问 cookie，这将返回当前域保存的所有 cookie。
var x = document.cookie
返回值是一个字符串，格式如下： name1=value1; name2=value2目前没有内置方法可以直接按名称读取单个 cookie，因此必须对字符串进行分割。下面的辅助函数返回单个值，如果 cookie 名称不存在则返回空字符串。
function getCookie(name) { const pairs = document.cookie.split(";"); for (let i = 0; i < pairs.length; i++) { const pair = pairs[i].trim(); if (pair.indexOf(name + "=") === 0) { // decode in case the value contained spaces or symbols return decodeURIComponent(pair.substring(name.length + 1)); } } return ""; } document.cookie = "username=Ann Smith; path=/"; console.log(getCookie("username")); console.log(getCookie("missing") === "");
输出：
Ann Smith true
Java脚本删除 Cookie
要删除 cookie，只需将 cookie 的值设置为空，并将 expires 的值设置为已过去的日期即可。
document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"
大多数删除失败的原因在于一个细节。浏览器通过 cookie 的名称、路径和域名来识别 cookie，因此删除语句必须使用与创建 cookie 时相同的路径和域名。
// created with an explicit path document.cookie = "theme=dark; path=/; max-age=2592000"; // deletion must repeat that same path document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"; // max-age=0 achieves the same result in one shorter line document.cookie = "theme=; path=/; max-age=0";
Cookie 属性详解
第一个分号之后的每个属性都会改变 cookie 的有效期、哪些请求会携带它以及哪些代码可以读取它。下面的参考资料涵盖了所有这些属性。
| 属性 | 目的 | 例如： |
|---|---|---|
| 到期 | UTC格式的绝对删除日期 | expires=Thu, 21 Aug 2031 20:00:00 UTC |
| 最大年龄 | 从现在开始计算的寿命（以秒为单位）。 | 最大年龄= 2592000 |
| 径 | 域内的目录范围 | 路径=/ |
| 域 | 主机范围，包括子域名 | domain=example.com |
| 安全消息传递 | 仅通过 HTTPS 连接发送 | 安全消息传递 |
| HttpOnly | 此信息对 document.cookie 隐藏，仅由服务器设置。 | HttpOnly |
| 相同网站 | 控制跨站请求的发送 | SameSite=Lax |
SameSite 参数值得特别关注，因为浏览器现在会应用默认值。三个可接受的值的行为如下。
- 严格： 当请求来自其他网站时，永远不会发送 cookie，这是银行会话最安全的设置。
- 松弛： 该 Cookie 会随顶级导航（例如点击链接）一起传输，但不会随跨站点图像或框架一起传输。这是现代浏览器的默认设置。
- 没有： 每次跨站请求都会发送 cookie，并且必须与 Secure 属性配对，否则浏览器会拒绝该 cookie。
// a well configured cookie set from client side script document.cookie = "language=en; path=/; max-age=31536000; SameSite=Lax; Secure";
💡提示： HttpOnly 属性不能从以下位置应用： Java这是脚本设计使然。只有服务器响应头才能设置它，而这正是保护会话 cookie 免受跨站脚本攻击的原因。
亲自尝试一下这个例子
以下脚本结合了这三个操作。它创建一个有效期为天的 cookie，通过名称读取该 cookie，并向再次访问的用户表示欢迎。 要使代码正常运行，请按两次运行按钮。
<html>
<head>
<title>Cookie!!!</title>
<script type="text/javascript">
function createCookie(cookieName,cookieValue,daysToExpire)
{
var date = new Date();
date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
}
function accessCookie(cookieName)
{
var name = cookieName + "=";
var allCookieArray = document.cookie.split(';');
for(var i=0; i<allCookieArray.length; i++)
{
var temp = allCookieArray[i].trim();
if (temp.indexOf(name)==0)
return temp.substring(name.length,temp.length);
}
return "";
}
function checkCookie()
{
var user = accessCookie("testCookie");
if (user!="")
alert("Welcome Back " + user + "!!!");
else
{
user = prompt("Please enter your name");
num = prompt("How many days you want to store your name on your computer?");
if (user!="" && user!=null)
{
createCookie("testCookie", user, num);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
预期行为：
First run : "Please enter your name" -> Ann
"How many days you want to store your name on your computer?" -> 5
Second run : alert box shows Welcome Back Ann!!!
Code 解释： `createCookie` 函数将天数转换为毫秒，并将其加到当前时间，从而生成过期日期。`accessCookie` 函数以分号分割 cookie 字符串，截取每个片段，并将片段的开头与请求的名称进行比较。`checkCookie` 函数在页面加载时将这两个函数关联起来。
⚠️警告： 该示例使用 toGMTString()这是一个已弃用的别名。新代码应该调用 toUTCString() 相反，因为已弃用的形式最终可能会从浏览器中移除。
Cookies、localStorage 和 sessionStorage
Cookie并非浏览器存储数据的唯一途径。浏览器还提供两种Web存储选项，正确选择可以避免每次请求都发送不必要的字节。
| 特性 | 利用Cookies的 | 本地存储 | 会话存储 |
|---|---|---|---|
| 容量 | 约 4 KB | 大约 5 MB | 大约 5 MB |
| 已发送至服务器 | 是的，每次匹配请求都会如此。 | 没有 | 没有 |
| 终身版 | 直至到期日 | 直到明确移除为止 | 直到标签页关闭为止 |
| 服务器可以写入它 | 是 | 没有 | 没有 |
| 可在多个标签页中访问 | 是 | 是 | 没有 |
| 典型用途 | 会话和身份验证 | 偏好设置和缓存数据 | 单次访问表单状态 |
实际操作的规则很简单。如果服务器需要该值，则使用 cookie。如果只有页面需要该值，则使用 localStorage 或 sessionStorage，因为这些值不会增加网络请求的权重。
Cookie 处理代码通常在多个页面之间共享，因此请进行审查。 内部和外部 Java脚本 在决定放置位置之前。这里使用的字符串分割方法建立在……之上。 Java脚本字符串 和 Java脚本数组方法并且，更多工作脚本出现在…… 实际 Java脚本代码示例.
