如何通过HTML设置Cookie？

在HTML中设置Cookie主要通过JavaScript的document.cookie属性来实现，以下是详细的步骤和相关说明：

一、设置Cookie

1、基本语法：

document.cookie = "name=value";

     document.cookie = "username=JohnDoe";

2、设置过期时间：

使用expires属性来指定Cookie的失效日期，格式为GMT/UTC格式。

     let expiryDate = new Date();
     expiryDate.setTime(expiryDate.getTime() + (7*24*60*60*1000)); // 设置7天后过期
     document.cookie = "username=JohnDoe; expires=" + expiryDate.toUTCString();

3、设置路径：

使用path属性来限制Cookie的作用范围。

     document.cookie = "username=JohnDoe; path=/";

4、设置域：

使用domain属性来指定Cookie的有效域名。

     document.cookie = "username=JohnDoe; domain=example.com";

5、HTTP Only：

使用secure属性来标记Cookie只能通过HTTPS协议传输。

     document.cookie = "username=JohnDoe; secure";

二、获取Cookie

读取Cookie时，document.cookie会返回一个包含所有Cookie的字符串，每个Cookie以分号和空格分隔，可以通过解析这个字符串来获取特定的Cookie值。

function getCookie(name) {
    let cookieArr = document.cookie.split(";");
    for(let i = 0; i < cookieArr.length; i++) {
        let cookiePair = cookieArr[i].split("=");
        if(name == cookiePair[0].trim()) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
    return null;
}
// 示例调用
let username = getCookie("username");
console.log(username); // 输出: JohnDoe

三、删除Cookie

删除Cookie实际上就是将其失效时间设置为过去的时间。

function deleteCookie(name) {
    document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT;';
}
// 示例调用
deleteCookie("username");

四、封装Cookie操作函数

为了方便管理，可以将Cookie的操作封装成函数。

function setCookie(name, value, daysToLive) {
    let date = new Date();
    date.setTime(date.getTime() + (daysToLive * 24 * 60 * 60 * 1000));
    let expires = "expires=" + date.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
function getCookie(name) {
    let nameEQ = name + "=";
    let ca = document.cookie.split(';');
    for(let i=0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function deleteCookie(name) {
    document.cookie = name+'=; MaxAge=99999999;';  
}

五、常见问题解答（FAQs）

Q1: Cookie的路径和域如何设置？

A1: Cookie的路径和域通过path和domain属性来设置。

document.cookie = "username=JohnDoe; path=/admin; domain=.example.com";

这将使Cookie只在/admin路径下有效，并且对所有子域名有效。

Q2: 如何确保Cookie只能通过HTTPS传输？

A2: 使用secure属性可以确保Cookie只能通过HTTPS传输。

document.cookie = "username=JohnDoe; secure";

这样设置的Cookie将仅在HTTPS连接中可用，从而增加安全性。