目录
什么是 Cookie？
在JavaScript中，cookie是一种小型的文本文件，它存储在用户的计算机上。通过使用cookie，网站可以向用户的浏览器发送数据，并将该数据保留在浏览器中，使网站能够在不同页面之间传递数据或存储用户偏好设置，以便在后续访问中进行读取和使用。
创建Cookie：
要创建一个cookie，可以使用document.cookie属性进行设置。document.cookie是一个字符串，其中包含当前与网站相关联的所有cookie。要创建一个名为cookieName的cookie，其值为cookieValue，可以使用以下语法：
document.cookie = "cookieName=cookieValue";
此时，cookie将被存储在浏览器中。
设置过期时间：
可以通过为cookie添加expires属性来设置cookie的过期时间。例如，如果要将cookie的过期时间设置为2023年12月31日23:59:59 UTC，可以这样写：
document.cookie = "cookieName=cookieValue; expires=Thu, 31 Dec 2023 23:59:59 UTC";
当达到过期时间时，浏览器将自动删除该cookie。
指定路径：
可以通过为cookie添加path属性来指定cookie的可访问路径。默认情况下，cookie只能在创建它的页面及其子目录中访问。如果要使cookie在整个网站范围内都可访问，可以将path设置为根目录：
document.cookie = "cookieName=cookieValue; path=/";
读取Cookie：
要读取cookie的值，可以使用document.cookie来获取当前与网站相关联的所有cookie。通常，cookie值将存储在一个字符串中。为了提取特定cookie的值，可以使用正则表达式或其他字符串处理方法。下面是一个示例，展示如何获取名为cookieName的cookie值：
var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)cookieName\s*\=\s*([^;]*).*$)|^.*$/, "$1");
这将从document.cookie字符串中提取名为cookieName的cookie的值，并将其存储在变量cookieValue中。
删除Cookie：
要删除cookie，可以通过将过期时间设置为过去的时间来使其过期，从而让浏览器自动删除cookie。例如，要删除名为cookieName的cookie，可以执行以下操作：
document.cookie = "cookieName=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
这将将cookie的过期时间设置为过去的时间，使其立即过期并被删除。
注意:
需要注意的是，JavaScript Cookie有一些限制。浏览器对cookie的数量和大小都有限制。此外，由于安全原因，浏览器还实施了跨域设置，限制网站在不同域之间访问cookie。更复杂的操作和cookie设置可以使用第三方库来简化处理，例如js-cookie等。
示例代码:
<!DOCTYPE html>
<html>
<head>
<title>Cookie操作示例页面</title>
</head>
<body>
<h1>Cookie操作示例页面</h1>
<!-- 创建Cookie按钮 -->
<button id="createBtn">创建Cookie</button>
<!-- 读取Cookie按钮 -->
<button id="readBtn">读取Cookie</button>
<!-- 修改Cookie按钮 -->
<button id="updateBtn">修改Cookie</button>
<!-- 设置Cookie过期时间按钮 -->
<button id="expireBtn">设置过期时间</button>
<!-- 删除Cookie按钮 -->
<button id="deleteBtn">删除Cookie</button>
<!-- JavaScript代码 -->
<script>
// 创建Cookie按钮点击事件处理函数
document.getElementById("createBtn").addEventListener("click", function() {
document.cookie = "myCookie=Hello World";
alert("已创建Cookie");
});
// 读取Cookie按钮点击事件处理函数
document.getElementById("readBtn").addEventListener("click", function() {
var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)myCookie\s*\=\s*([^;]*).*$)|^.*$/, "$1");
alert("Cookie的值为：" + cookieValue);
});
// 修改Cookie按钮点击事件处理函数
document.getElementById("updateBtn").addEventListener("click", function() {
document.cookie = "myCookie=How are you?";
alert("已修改Cookie");
});
// 设置Cookie过期时间按钮点击事件处理函数
document.getElementById("expireBtn").addEventListener("click", function() {
var expirationDate = new Date();
expirationDate.setFullYear(2023);
expirationDate.setMonth(11); // 月份从0开始，11代表12月
expirationDate.setDate(31);
document.cookie = "myCookie=How are you?; expires=" + expirationDate.toUTCString();
alert("已设置Cookie过期时间为2023年12月31日");
});
// 删除Cookie按钮点击事件处理函数
document.getElementById("deleteBtn").addEventListener("click", function() {
document.cookie = "myCookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
alert("已删除Cookie");
});
</script>
</body>
</html>
以上是一个包含创建、读取、修改、设置过期时间和删除Cookie的示例HTML页面。每个按钮都有一个唯一的id，并通过JavaScript代码绑定了对应的点击事件处理函数。点击不同的按钮会执行相应的操作，并弹出提示框显示相关信息。