html如何设置cookies

HTML 本身并不能直接设置 cookies，它只能通过 JavaScript 来操作，Cookies 是存储在用户浏览器上的一小段文本信息，用于记录用户的某些操作状态或者偏好设置，在前端开发中，我们经常需要使用 cookies 来实现用户的登录状态保持、购物车功能等。

下面我将详细介绍如何使用 JavaScript 来设置 cookies。

1、创建 Cookies

要创建一个新的 cookies，我们需要使用 document.cookie 属性，这个属性可以接受一个字符串值，该值包含了 cookie 的名称和值，以及其它一些可选的参数。

我们可以使用以下代码来创建一个名为 "username" 的 cookies，并设置其值为 "张三"：

document.cookie = "username=张三";

2、读取 Cookies

要读取一个已存在的 cookies，我们可以使用 document.cookie 属性，这个属性会返回一个字符串，包含了当前页面所有的 cookies，我们可以对这个字符串进行解析，以获取我们需要的信息。

我们可以使用以下代码来读取名为 "username" 的 cookies：

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for (var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        if (name == cookiePair[0].trim()) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
    return null;
}
var username = getCookie("username");
console.log(username); // 输出 "张三"

3、修改 Cookies

要修改一个已存在的 cookies，我们可以先删除原有的 cookies，然后重新创建一个新的 cookies，需要注意的是，如果设置了 maxage 或 expires 参数，cookie 会被持久化到磁盘上，即使关闭浏览器也不会被删除，在修改 cookies 时，我们需要先删除这些参数。

我们可以使用以下代码来修改名为 "username" 的 cookies：

function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
setCookie("username", "李四", 7); // 将 "username" 的值修改为 "李四"，有效期为 7 天

4、删除 Cookies

要删除一个已存在的 cookies，我们可以将其过期时间设置为一个过去的时间点，这样，当浏览器访问这个 cookies 时，会发现它的过期时间已经过去了，从而自动删除它。

我们可以使用以下代码来删除名为 "username" 的 cookies：

function deleteCookie(name) {    this.setCookie(name,"",1);  }
deleteCookie("username"); // 删除名为 "username" 的 cookies

5、Cookie 的其他参数

除了名称和值之外，我们还可以使用一些可选的参数来设置 cookies，以下是一些常用的参数：

path：指定 cookie 的作用范围，默认值为当前路径（/），表示在整个网站上都可以访问这个 cookie，如果要限制 cookie 的作用范围，可以设置一个具体的路径。path=/user 表示这个 cookie 只能在 /user 这个路径下访问。

domain：指定 cookie 所属的域名，默认值为当前域名，表示这个 cookie 只能在当前域名下访问，如果要让 cookie 在多个域名下都可以访问，可以设置一个具体的域名。domain=.example.com 表示这个 cookie 可以在 example.com 及其所有子域名下访问。

secure：指定是否仅通过 HTTPS 安全连接传输 cookie，默认值为 false，表示可以通过 HTTP 和 HTTPS 两种连接传输 cookie，如果要确保 cookie 的安全性，可以将其设置为 true，但是需要注意的是，这样设置后，cookie 将无法通过非安全连接传输，可能导致某些情况下无法正常使用。