html 如何使用cookies

HTML 本身并不直接支持 Cookies，但是可以通过 JavaScript 来实现对 Cookies 的操作，Cookies 是浏览器用来存储用户本地数据的一种方式，通常用于保存用户的登录状态、购物车信息等，在 HTML 页面中，我们可以通过 JavaScript 来创建、读取、修改和删除 Cookies。

以下是如何使用 JavaScript 操作 Cookies 的详细教程：

1、创建 Cookies

要创建一个 Cookie，我们需要使用 document.cookie 属性，这个属性允许我们设置或读取当前网页的 Cookie，要创建一个名为 "username" 的 Cookie，其值为 "John Doe"，可以使用以下代码：

document.cookie = "username=John Doe";

注意，Cookie 的属性值必须以分号（；）和空格（）结尾，我们还可以在 Cookie 的属性值中添加其他属性，expires（过期时间）、path（路径）和 domain（域名），我们可以将上述 Cookie 设置为只在当前目录及其子目录下有效，并在一天后过期：

document.cookie = "username=John Doe; expires=; path=/; domain=example.com";

2、读取 Cookies

要读取一个 Cookie，我们可以使用 document.cookie 属性，要获取名为 "username" 的 Cookie 的值，可以使用以下代码：

var cookieValue = document.cookie.replace(/(?:(?:^|.*;s*)usernames*=s*([^;]*).*$)|^.*$/, "$1");
console.log(cookieValue); // 输出 "John Doe"

在这个例子中，我们使用了正则表达式来匹配名为 "username" 的 Cookie 的值，如果找到了匹配项，replace() 方法会将其替换为第一个捕获组的内容（即 Cookie 的值），如果没有找到匹配项，replace() 方法会返回原始的 document.cookie 属性值。

3、修改 Cookies

要修改一个 Cookie，我们可以先删除原有的 Cookie，然后创建一个新的 Cookie，要将名为 "username" 的 Cookie 的值从 "John Doe" 修改为 "Jane Doe"，可以使用以下代码：

// 删除原有的 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=example.com";
// 创建新的 Cookie
document.cookie = "username=Jane Doe; path=/; domain=example.com";

4、删除 Cookies

要删除一个 Cookie，我们可以将其过期时间设置为一个过去的时间点，要删除名为 "username" 的 Cookie，可以使用以下代码：

// 设置 Cookie 的过期时间为过去的时间点
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=example.com";

5、遍历 Cookies

要遍历一个网站的所有 Cookies，我们可以使用 document.cookie 属性，以下是一个遍历所有 Cookies 并打印其名称和值的示例：

var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i];
    var cookieName = cookie.substring(0, cookie.indexOf("="));
    var cookieValue = cookie.substring(cookie.indexOf("=") + 1);
    console.log("Cookie Name: " + cookieName + ", Cookie Value: " + cookieValue);
}

在这个例子中，我们首先使用 split() 方法将 document.cookie 属性按分号（；）分割成一个数组，我们遍历这个数组，并使用 substring() 方法提取每个 Cookie 的名称和值，我们使用 console.log() 方法打印出每个 Cookie 的名称和值。