JavaScript 和 Cookies
Cookies 是什么？
在 JavaScript 中，cookies 是存储在用户 web 浏览器中的数据片段。cookies 以键值对的形式存储在浏览器中。我们可以使用 document 对象的 cookie 属性来操作 cookies。我们可以使用 cookie 属性以键值对的形式设置或存储 cookie。我们可以使用 document 的 cookie 属性读取 cookies，并使用解构来提取所需信息。
为什么需要 Cookies？
Web 浏览器和服务器使用 HTTP 协议进行通信，而 HTTP 是一种无状态协议。但对于商业网站，需要在不同页面之间维护会话信息。
例如，你已经在某个网站的特定网页上登录了。同一网站的其它网页如何知道你的状态，即你已经完成了登录过程？在这种情况下，就使用了 cookies。
在许多情况下，使用 cookies 是记住和跟踪用户偏好、购买、佣金以及其他信息的最有效方法，这些信息有助于提升访客体验或网站统计。
有时，cookies 还用于缓存，以提高网站或应用的性能。
它是如何工作的？
你的服务器以 cookie 的形式向访客的浏览器发送一些数据。浏览器可能会接受该 cookie。如果接受，它将作为纯文本记录存储在访客的硬盘上。现在，当访客到达你网站的另一个页面时，浏览器会将相同的 cookie 发送回服务器以供检索。一旦检索到，你的服务器就会知道/记住之前存储的内容。
Cookies 是包含 5 个可变长度字段的纯文本数据记录 −
Expires − cookie 过期日期。如果此字段为空，则访客关闭浏览器时 cookie 将过期。
Domain − 你网站的域名。
Path − 设置 cookie 的目录或网页路径。如果希望从任何目录或页面检索 cookie，此字段可以为空。
Secure − 如果此字段包含“secure”一词，则 cookie 只能通过安全服务器检索。如果此字段为空，则不存在此类限制。
Name=Value − cookies 以键值对的形式设置和检索
Cookies 最初是为 CGI 编程设计的。cookie 中包含的数据会在 web 浏览器和 web 服务器之间自动传输，因此服务器上的 CGI 脚本可以读取和写入存储在客户端的 cookie 值。
设置/存储 Cookies
JavaScript 可以使用 Document 对象的 cookie 属性来操作 cookies。JavaScript 可以读取、创建、修改和删除适用于当前网页的 cookies。
创建 cookie 的最简单方法是将字符串值赋值给 document.cookie 对象，格式如下所示。
document.cookie = "key1 = value1;key2 = value2;expires = date";
这里的 expires 属性是可选的。如果提供了有效的日期或时间，该 cookie 将在指定日期或时间过期，此后 cookie 的值将无法访问。
cookie 字符串包含由分号分隔的键值对。
注意 − Cookie 值不能包含分号、逗号或空格。因此，在将值存储到 cookie 中之前，您可能需要使用 JavaScript 的 escape() 函数对值进行编码。如果这样做，在读取 cookie 值时也需要使用对应的 unescape() 函数。
示例
尝试以下代码。它会在 input cookie 中设置客户名称。
<html>
<head>
<script type = "text/javascript">
function WriteCookie() {
if( document.myform.customer.value == "" ) {
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
</form>
</body>
</html>
输出
现在您的机器上有一个名为 name 的 cookie。您可以使用逗号分隔的多个 key = value 对来设置多个 cookies。
读取 Cookies
读取 cookie 和写入 cookie 一样简单，因为 document.cookie 对象的取值就是 cookie 本身。因此，您可以随时使用此字符串来访问 cookie。document.cookie 字符串将保持由分号分隔的 name=value 对列表，其中 name 是 cookie 的名称，value 是其字符串值。
您可以使用字符串的 split() 函数将字符串拆分为键和值，如下所示 −
示例
尝试以下示例来获取所有 cookies。
<html>
<head>
<script type = "text/javascript">
function ReadCookie() {
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
// 将所有 cookie 对放入数组中
cookiearray = allcookies.split(';');
// 现在从该数组中取出键值对
for(var i=0; i<cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write ("Key is : " + name + " and Value is : " + value);
}
}
</script>
</head>
<body>
<form name = "myform" action = "">
<p> click the following button and see the result:</p>
<input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</form>
</body>
</html>
注意 − 此处的 length 是 Array class 的方法，用于返回数组的长度。我们将在单独的章节中讨论 Arrays。在此之前，请尝试理解它。
注意 − 您的机器上可能已经设置了一些其他 cookies。上述代码将显示您的机器上设置的所有 cookies。
设置 Cookie 的过期日期
您可以通过设置过期日期并在 cookie 中保存该过期日期，将 cookie 的生命周期延长到当前浏览器会话之外。这可以通过将 expires 属性设置为日期和时间来实现。
示例
尝试以下示例。它演示了如何将 cookie 的过期日期延长 1 个月。
<html>
<head>
<script type = "text/javascript">
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write ("设置 Cookie : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name = "myform" action = "">
输入姓名: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>
输出
删除 Cookie
有时您可能想要删除一个 cookie，以便后续读取 cookie 的尝试返回空值。要实现这一点，只需将过期日期设置为过去的时间即可。
示例
尝试以下示例。它演示了如何通过将 cookie 的过期日期设置为当前日期前一个月来删除 cookie。
<html>
<head>
<script type = "text/javascript">
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("设置 Cookie : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name = "myform" action = "">
输入姓名: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>
输出
更新 Cookies
要更新 cookie 中的特定键值对，可以将新的键值对赋值给 document.cookie 属性。在此，你需要确保使用的是要更新的键。
语法
按照以下语法更新 cookies。
document.cookie="key1=value1";
在上述语法中，我们正在更新键 cookie 的值。
示例
在下面的代码中，点击 set cookies 按钮来设置 cookies。它将为 cartItem 设置 watch 值，并为 price 设置 10000。
之后，你可以点击 get cookies 按钮来查看 cookies。
接下来，你可以点击 update cookies 按钮来更新 cookies。它将把 cartItem 值更改为 bag，把 price 更改为 5000。
现在，再次点击 get cookies 按钮来获取更新后的 cookie 值。
<html>
<body>
<p id = "output"> </p>
<button onclick = "setCookies()"> Set Cookie </button> <br> <br>
<button onclick = "updateCookies()"> Update Cookie </button> <br> <br>
<button onclick = "getCookies()"> Get Cookies </button>
<script>
let output = document.getElementById("output");
function setCookies() {
document.cookie = "cartItem=watch";
document.cookie = "price=10000";
}
function updateCookies() {
// 更新 cookies
document.cookie = "cartItem=bag";
document.cookie = "price=5000";
}
function getCookies() {
// 分割 cookie 字符串
const allCookies = document.cookie.split("; ");
output.innerHTML = "cookie 数据如下： <br>";
for (const cookie of allCookies) {
const [key, value] = cookie.split("=");
if (key == "cartItem" || key == "price") {
output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
}
}
}
</script>
</body>
</html>