新闻中心

js清除cookie

发布时间：2024-10-22 08:38:43 点击量：9

要在JavaScript中清除浏览器的Cookie，我们首先需要了解什么是Cookie以及它们的工作原理。Cookie是由Web服务器发送并存储在用户浏览器中的小型文本文件，通常用于保存用户的会话信息、偏好设置及其他数据，以便在用户再次访问该网站时提供定制化体验。

如何管理Cookie？

JavaScript提供了一些基本的方法来创建、读取和删除Cookie。要在JavaScript中管理Cookie，最重要的是要使用document.cookie。这个属性允许我们访问和操作Cookie。然而，需要注意的是，document.cookie是一种封装，不能直接作为对象来操作，而是通过特定的字符串格式。

设置Cookie

要设置一个Cookie，可以直接给document.cookie赋值：

document.cookie = "username=JohnDoe; path=/; expires=Fri, 31 Dec 2022 23:59:59 GMT; secure; samesite=strict";

在设置Cookie时，你可以指定不同的属性：

name=value是必须的，用来设置Cookie的名称和值。
expires设置Cookie的过期时间。没有设置时，Cookie在会话结束时过期。
path定义Cookie的有效路径。
domain指定Cookie的有效域。
secure指示Cookie只能在HTTPS连接中传输。
samesite保护Cookie不被跨站点请求伪造。

读取Cookie

读取Cookie相对简单，但需要一些字符串操作。document.cookie返回包含所有可访问Cookie的字符串，其中每个Cookie用分号加空格分隔开来。

下面是一个示例函数，用于获取特定名称的Cookie：

function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) {
        return parts.pop().split(';').shift();
    }
    return '';
}

清除Cookie

清除Cookie的*方法是设置一个已过期的时间，因为Cookie是基于浏览器设置的：

function deleteCookie(name) {
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
}

这个deleteCookie函数通过设置Cookie的过期时间为1970年1月1日来“删除”Cookie。

使用Secure和SameSite属性

现代浏览器支持更多的Cookie属性，以增强安全性和隐私。其中两个重要的属性是Secure和SameSite。

Secure属性确保Cookie只能通过HTTPS传输。
SameSite属性保护Cookie免受跨站点请求伪造（CSRF）攻击。它具有以下三个选项：
- Strict：在同一站点请求中发送Cookie。
- Lax：大多数情况下发送Cookie，但在某些跨站点子请求中（如图像加载）除外。
- None：Cookie与跨站点请求一起发送，前提是Secure标志也被设置为true。

管理Cookie的实用工具函数

下面是一个综合的JavaScript工具库，用于管理Cookie，它包括设置、获取和删除的方法：

const CookieManager = (function () {
    function setCookie(name, value, days, options = {}) {
        let expires = '';
        if (days) {
            const date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        const path = options.path ? `; path=${options.path}` : '';
        const domain = options.domain ? `; domain=${options.domain}` : '';
        const secure = options.secure ? '; secure' : '';
        const sameSite = options.sameSite ? `; samesite=${options.sameSite}` : '';

        document.cookie = `${name}=${value || ""}${expires}${path}${domain}${secure}${sameSite}`;
    }

    function getCookie(name) {
        const nameEQ = name + "=";
        const 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 eraseCookie(name, options = {}) {
        setCookie(name, "", -1, options);
    }

    return {
        set: setCookie,
        get: getCookie,
        erase: eraseCookie
    };
})();

// 使用示例
CookieManager.set('test', 'value', 7, {path: '/', secure: true, sameSite: 'Lax'});
console.log('Cookie Value:', CookieManager.get('test'));
CookieManager.erase('test');