JavaScript 删除cookie

创建cookie之后，可能出于各种原因需要将其删除。

网络上提供有很多封装好的删除代码，但是绝大多数忽略了一个问题。

从而导致代码有时候好用，有时则不能删除指定cookie，下面将详细介绍一下如何删除cookie。

后面文章会涉及到一些概念，这里提前给出参考文章：

（1）.path与domain参阅cookie path路径与domain域一章节。

（2）. Secure与HttpOnly参阅cookie Secure与HttpOnly一章节。

一.删除cookie的方式：

（1）.没有显式设置cookie过期时间：

如果没有显示设置cooke过期时间，cookie不会存入本地硬盘，仅存留于内存中。

当我们关闭浏览器的时候，cookie会自动删除，生命周期无需我们操控。

（2）.显式设置cookie过期时间：

更多的时候，cookie的生命周期可能需要人为的设置，以达到某些需求。

比如用户名与密码保存一天、一周或者一月等设置，通过Expires属性即可实现。

当当前时间日期超过Expires属性值时，cookie就会被自动删除。

关于过期时间可以参阅JavaScript 设置cookie 过期时间一章节。

二.封装删除：

JavaScript并没有内置接口直接删除cookie，但是可以利用过期时间实现删除功能。

代码实例如下：

//取cookies     
function getCookie(name){
  let arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr != null) return unescape(arr[2]); 
  return null;
}
//删除cookie
function delCookie(name){
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}

上面代码可以实现删除指定名称cookie的功能，比较常用，且网上代码绝大多数都是如此，本文作者曾经也对此深信不疑，因为它的确能够删除指定的cookie，但是上述代码有缺陷，有时会不能够删除指定名称的功能，下面做一下演示。

通过控制台下添加如下cookie：

document.cookie="name=小逗号;path=/"

效果如下：

下面进行删除操作：

可以看到名称为name的cooki并没有被删除，没删除就对了，因为上面的函数封装没有考虑周全。

cookie的修改需要遵循一个原则，那么就是cookie的如下四个属性必须匹配：

（1）.key

（2）.domain

（3）.path

（4）.secure

当我们在设置cookie的时候显式设置path为根目录/，但是在删除的时候没有规定路径，所以删除失败。

删除cookie就是对cookie的过期时间的修改，所以也要遵循上述原则，代码修改如下：

//取cookies     
function getCookie(name){
  let arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr != null) return unescape(arr[2]); 
  return null;
}
//删除cookie
function delCookie(name){
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null) 
    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString()+";path=/";
}
delCookie("name");
document.cookie;

运行效果如下：

可以看到名称为aname的cookie成功被删除。

所以这一点要特别的主意，因为如果对cookie掌握的不是太全面可能就会导致无法删除指定cookie得现象。

且查错比较困难，上述代码没有进行封装，只是演示了删除cookie的注意点。