JS删除cookie|极客笔记

JS删除cookie

在网页开发中，cookie是一种存储在用户计算机上的小型文本文件，用于跟踪用户的活动。但有时候我们需要删除已经设置的cookie，本文将介绍如何使用JavaScript删除cookie。

什么是cookie

首先让我们来了解一下cookie是什么以及它的作用。Cookie是一种在访问网站时存储在用户计算机上的小型文本文件，它通常包含有关用户和访问网站的信息。通过cookie，网站可以跟踪用户的活动，并在用户下次访问网站时使用这些信息。例如，网站可以记住用户的登录状态，保存用户的购物车内容等。

如何设置cookie

在JavaScript中，我们可以使用document.cookie属性来设置、读取和删除cookie。要设置一个cookie，我们可以简单地将键值对以字符串形式赋给document.cookie，并设置一些cookie属性，如过期时间、域名和路径等。下面是一个设置cookie的示例代码：

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", "John Doe", 7);

在上面的代码中，setCookie函数接受三个参数：name表示cookie的键，value表示cookie的值，days表示cookie的过期时间（单位为天）。在这个示例中，我们设置了一个名为username的cookie，值为John Doe，并且设定了过期时间为7天。

如何删除cookie

要删除一个cookie，我们只需要将cookie的过期时间设置为一个过去的时间即可。以下是一个简单的删除cookie的示例代码：

function deleteCookie(name) {
    document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

deleteCookie("username");

在上面的代码中，deleteCookie函数接受一个参数name，表示要删除的cookie的键。在函数中，我们将cookie的过期时间设置为一个过去的时间（1970年1月1日），这样浏览器就会删除该cookie。

示例

让我们来看一个完整的示例，将设置cookie、读取cookie和删除cookie结合起来：

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=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var cookies = document.cookie.split(";");

    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i];
        while (cookie.charAt(0) == " ") {
            cookie = cookie.substring(1);
        }
        if (cookie.indexOf(nameEQ) == 0) {
            return cookie.substring(nameEQ.length, cookie.length);
        }
    }

    return null;
}

function deleteCookie(name) {
    document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

// 设置cookie
setCookie("username", "John Doe", 7);

// 读取cookie
var username = getCookie("username");
console.log("Username:", username);

// 删除cookie
deleteCookie("username");

username = getCookie("username");
console.log("Username:", username);

在上面的示例中，我们通过调用setCookie函数设置了一个名为username的cookie，然后通过调用getCookie函数读取了该cookie，并最后通过调用deleteCookie函数删除了该cookie。