js清除多条cookie时只清除一条的问题

最新推荐文章于 2023-11-22 12:45:38 发布

原创最新推荐文章于 2023-11-22 12:45:38 发布 · 761 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #cookie

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文通过一次项目经历，详细解析了在JavaScript中如何正确地清除浏览器的所有Cookie。作者最初尝试通过将所有Cookie的Max-Age设为0来一次性清除所有Cookie，但发现这种方法只清除了第一个Cookie。经过查阅MDN文档后，了解到document.cookie一次只能设置或更新一个Cookie。最终，通过遍历所有Cookie并逐一设置其Max-Age为0的方式成功解决了问题。

之前在做一个项目时，有一个登出功能需要清除所有cookie，我一想，给这所有cookie的过期时间Max-Age全都设为0不就可以了，

（这里不使用Expires的原因是服务器可能不是北京时间，这样的话将Expires设为当前的本地时间可能会无效）

代码很简单，如下:

        const keys = document.cookie.match(/[^=;]+(?==")/g);
        let cookie = '';
        for (let key of keys) {
        // cookie的值随便设，这里设为0
        cookie += `${value}=0; max-age=0`;
        }
        document.cookie = cookie;

结果，当我调试的时候，发现cookie并没有完全清除，或者说只有第一条cookie被清除了，我折腾了好久，最后去mdn查了document.cookie的文档才弄明白，原来在一次document.cookie的赋值时，只能设置或更新一个cookie，

原话：

Note that you can only set/update a single cookie at a time using this method.

而其他的键值对是为了更新这个cookie的属性。这样的话就要进行多次更新。新的代码如下：

        const keys = document.cookie.match(/[^=;]+(?==")/g);
        keys.forEach(value => document.cookie = `${value}=0; max-age=0`);

反而更简单了。

问题解决之后，总结一下：写代码的时候不能有这种理所当然的心态，对于未知或者不确定的东西，还是查文档最靠谱，自己猜很容易出错，而且还有可能形成错误的认知，以后要再仔细一些。