JavaScript（JS）Cookies是Web开发中用于存储小量数据在用户本地浏览器的一种机制。它们对于跟踪用户会话、个性化用户体验以及存储用户设置等场景非常有用。这篇博客文章将深入探讨如何在JavaScript中设置、读取和删除Cookies。
一、设置Cookie
在JavaScript中设置Cookie主要涉及`document.cookie`属性。这个属性是一个字符串，由多个键值对通过分号和空格分隔，每个键值对由等号连接。例如，设置一个名为`username`的Cookie，其值为`John`，可以这样操作：
```javascript
document.cookie = "username=John; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/";
```
这里，`expires`参数用于设置Cookie的过期时间，通常用日期对象表示；`path`参数指定Cookie的作用路径，`/`代表整个域名。还可以添加其他参数，如`domain`（用于指定Cookie可见的域名）和`secure`（如果值为true，只有在HTTPS协议下才会发送Cookie）。
二、读取Cookie
读取Cookie时，不能直接通过`document.cookie`获取，因为它是以字符串形式返回所有Cookie，我们需要将其拆解。可以使用以下函数实现：
```javascript
function getCookie(name) {
var cookieArr = document.cookie.split(";");
for (var i = 0; i < cookieArr.length; i++) {
var cookiePair = cookieArr[i].split("=");
// 去掉空白字符并转换为小写
var cookieName = cookiePair[0].trim().toLowerCase();
if (cookieName === name) {
// 解码Cookie值，并返回
return decodeURIComponent(cookiePair[1]);
}
}
// 如果未找到对应的Cookie，返回null
return null;
}
console.log(getCookie("username")); // 输出：John
```
三、删除Cookie
删除Cookie的原理是设置一个同名的Cookie，并设定过期时间为过去的时间。这样，当浏览器下次加载页面时，会自动清理已过期的Cookie。例如：
```javascript
function deleteCookie(name) {
var date = new Date();
date.setTime(date.getTime() - 1); // 设置时间为1秒前
document.cookie = name + "=; expires=" + date.toUTCString() + "; path=/";
}
deleteCookie("username");
```
四、示例代码
在提供的`demo2`文件中，可能包含了一个实际的示例代码，用于演示上述操作。这个示例可能包括一个简单的HTML页面，页面上有一个按钮，点击按钮后，会使用JavaScript进行Cookie的操作。用户可以查看源码以了解具体实现细节。
总结，JavaScript中的Cookie管理是Web开发中的基础技能，它能够帮助开发者在客户端持久化存储少量数据。通过设置、读取和删除Cookie，我们可以实现用户会话管理、状态保持等多种功能。理解并熟练掌握这些操作，对于提升Web应用的用户体验至关重要。
