JS设置cookie、读取cookie、删除cookie

下面是JS设置cookie、读取cookie、删除cookie的完整攻略：

1. 设置Cookie

我们可以通过JS来设置cookie，具体方法如下：

// 设置cookie
document.cookie = "cookieName=cookieVal; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/";

上面的代码中，我们使用 document.cookie 来设置cookie，它的值是以键值对的形式设置的，使用分号来分隔多个键值对，每个键值对之间使用等号来连接，如 "cookieName=cookieVal" 代表设置了一个名为 cookieName 值为 cookieVal 的cookie。

我们还可以通过设置 cookie 的过期时间、作用域等属性：

document.cookie = "cookieName=cookieVal; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/; domain=example.com; secure";

其中：

• expires 指定了cookie的过期时间，需要指定为 GMT 时间格式，若不为 GMT 时间格式则该选项无效。
• path 表示 cookie 作用域的路径，只有在该路径下的页面才能访问该cookie，若未设置则表示当前页面所在路径。
• domain 表示 cookie 作用域的域名，只有在该域名下的页面才能访问该cookie，若未设置则表示当前页面所在域名。
• secure 表示该cookie只能在https连接下被使用。

2. 读取Cookie

读取cookie只需要通过document.cookie来获取，具体实现如下：

// 读取cookie
let cookieStr = document.cookie;

上述代码将会返回一个字符串，其中包含了当前页面上设置的所有cookie。

为了方便读取某个特定的cookie值，我们可以实现一个工具函数，具体如下：

function getCookie(name) {
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg)) {
        return unescape(arr[2]);
    }
    else {
        return null;
    }
}

上述代码中，我们通过正则表达式匹配获取到名为 name 的cookie的值。

3. 删除Cookie

删除cookie只需要设置 expires 选项为过去的时间即可，具体代码如下：

// 删除cookie
document.cookie = "cookieName=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"

上述代码中，我们将名为 cookieName 的cookie的值设置为空，并将 expires 选项设置为过去的时间，这样就会自动删除该cookie。

下面给出一个完整示例，展示如何通过JS设置、读取、删除cookie：

// 设置cookie
document.cookie = "username=John Doe; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/; domain=example.com; secure";

// 读取cookie
let username = getCookie("username");
console.log(username); // 输出 "John Doe"

// 删除cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
username = getCookie("username");
console.log(username); // 输出 null

以上就是JS设置cookie、读取cookie、删除cookie的完整攻略。