JS中对Cookie的操作详解

什么是Cookie？

在Web开发中，Cookie（也叫作HTTP Cookie）是存储于用户计算机上的一个小文本文件。它的目的是为了记录用户的一些信息，例如登录状态、购物车信息等。当用户再次访问同一网站时，服务器能够读取这些Cookie，并且根据其中记录的信息为用户提供更好的体验。

如何创建一个Cookie？

为了创建一个Cookie，需要使用document.cookie变量，如下所示：

document.cookie = "name=value; expires=date; path=path; domain=domain; secure";

上述代码中，name和value分别代表要存储的键值对的名称和值。expires指定了Cookie的过期时间。path指定了Cookie的有效路径。domain指定了Cookie的有效域。secure表示Cookie只能通过HTTPS协议来传输。

以下是一个示例，创建一个名为username的Cookie：

document.cookie = "username=johndoe; expires=Thu, 18 Dec 2021 12:00:00 UTC; path=/; domain=example.com; secure";

这个Cookie将在2021年12月18日12:00:00 UTC过期，并且只在example.com域下的所有路径可见。

如何读取Cookie的值？

为了读取Cookie的值，可以使用document.cookie变量，如下所示：

let cookieValue = document.cookie;

上述代码将返回所有Cookie的值并以字符串的形式返回。返回值的格式为name1=value1; name2=value2; ...。

以下是一个示例，读取名为username的Cookie的值：

let cookieValue = document.cookie;
let cookies = cookieValue.split(';');
for(let cookie of cookies){
    cookie = cookie.trim();
    if(cookie.startsWith('username=')){
        let username = cookie.substring('username='.length);
        console.log(`The username is ${username}`);
        break;
    }
}

这个示例中，我们先使用split()方法来将所有的Cookie分开为一个个独立的字符串，并使用for循环遍历每一个Cookie。使用trim()方法去掉字符串中的空格，然后使用startsWith()方法判断该Cookie是否以username=开头。如果是，则使用substring()方法截取username键对应的值，并输出到控制台。

如何删除Cookie？

为了删除一个Cookie，需要给该Cookie设置一个过期时间，将它的生命周期设置为过去的某一个日期即可，如下所示：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=example.com; secure";

上述代码中，我们将username的生命周期设置为1970年1月1日0:00:00 UTC，这将使得该Cookie立即过期并且被删除。

以下是一个示例，删除名为username的Cookie：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=example.com; secure";
console.log("The username cookie has been deleted");