Cookies 是什么？
在 JavaScript 中，Cookies 是存储在用户网络浏览器中的数据片段。Cookies 以键值对的形式存储在浏览器中。我们可以通过文档对象的 cookie 属性来操作 Cookies。使用 cookie 属性，我们可以设置或存储键值对形式的 Cookie。我们可以通过文档的 cookie 属性读取 Cookies 并使用解构来提取所需的信息。
Cookies 的用途
网络浏览器和服务器使用 HTTP 协议进行通信，而 HTTP 是一种无状态协议。但对于商业网站来说，在不同页面之间保持会话信息是必要的。
例如，你在某个特定网页上登录了一个特定网站。其他同一网站的网页是如何知道你的状态——即你已经完成了登录过程？在这种情况下，就会用到 Cookies。
在许多情况下，使用 Cookies 是记住和跟踪偏好设置、购买记录、佣金以及为了更好的访客体验或站点统计所需信息的最有效的方法。
有时，Cookies 也被用于缓存，以提高网站或应用程序的性能。
Cookies 如何工作？
你的服务器以 Cookie 形式向访问者的浏览器发送一些数据。浏览器可能会接受这个 Cookie。如果它接受了，那么这个 Cookie 就会以纯文本记录的形式存储在访问者的硬盘上。现在，当访问者到达你网站上的另一个页面时，浏览器会向服务器发送相同的 Cookie 以便检索。一旦检索后，你的服务器就能知道/记住之前存储的内容。
Cookies 是由五个可变长度字段组成的纯文本数据记录：
-
Expires - Cookie 将到期的日期。如果此字段为空，则 Cookie 在访问者退出浏览器时到期。
-
-
Path - 设置 Cookie 的目录或网页路径。如果希望从任何目录或页面检索 Cookie，则此字段可能为空。
-
Secure - 如果此字段包含单词 “secure”，则只有通过安全服务器才能检索 Cookie。如果此字段为空，则不存在此类限制。
-
Name=Value - Cookies 以键值对的形式设置和检索。
Cookies 最初是为 CGI 编程设计的。存储在 Cookie 中的数据会在网络浏览器和 Web 服务器之间自动传输，因此服务器上的 CGI 脚本可以读写存储在客户端的 Cookie 值。
设置 / 存储 Cookies
JavaScript 可以通过文档对象的 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() 函数。
示例
尝试以下示例。它在一个输入 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。你可以使用多个键 = 值对通过逗号分隔来设置多个 Cookies。
读取 Cookies
读取一个 Cookie 和写入一样简单，因为 document.cookie 对象的值就是 Cookie。所以你可以在任何时候使用这个字符串来访问 Cookie。document.cookie 字符串将保持一个由等号分隔的名称 = 值对列表，其中名称是一个 Cookie 的名称，而值是它的字符串值。
你可以使用字符串的 split() 函数来分解出键和值，如下所示：
示例
尝试以下示例来获取所有 Cookies。
<html>
<head>
<script type = "text/javascript">
function ReadCookie() {
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
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 类的一个方法，它返回数组的长度。我们将在单独的一章中讨论数组。在此之前，请尽量理解它。
注意 - 可能已经有其他 Cookie 设置在你的机器上。上述代码将显示所有设置在你的机器上的 Cookies。
设置 Cookies 的过期日期
你可以通过设置一个过期日期并将过期日期保存在 Cookie 内来延长 Cookie 的生命周期。这可以通过设置 ‘expires’ 属性为一个日期和时间来完成。
示例
尝试以下示例。它演示了如何通过一个月的时间来延长 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 ("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>
删除 Cookies
有时候，你可能需要删除一个 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("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>
更新 Cookies
要更新 Cookie 中的特定键值对，可以将新的键值对赋给 document.cookie 属性。这里，你需要确保你正在更新的是你想更新的那个键的值。
语法
按照下面的语法来更新 Cookies。
document.cookie="key1=value1";
在上面的语法中，我们正在更新 ‘key’ 这个 Cookie 的值。
示例
在下面的代码中，点击“设置 Cookies”按钮来设置 Cookies。它将会设置 cartItem 的值为 watch，price 的值为 10000。
之后，你可以点击“获取 Cookies”按钮来查看这些 Cookies。
接着，你可以点击“更新 Cookies”按钮来更新 Cookies。它将会把 cartItem 的值改为 bag，price 的值改为 5000。
现在，再次点击“获取 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() {
document.cookie = "cartItem=bag";
document.cookie = "price=5000";
}
function getCookies() {
const allCookies = document.cookie.split("; ");
output.innerHTML = "The cookie data are : <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>