文章导航

JavaScript 删除cookie

2018-12-30 15:51| 作者: admin| 查看: 1456| 评论: 0|来自: 蚂蚁部落

创建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,但是可以利用过期时间实现删除功能。

代码实例如下: 

[JavaScript] 纯文本查看 复制代码
//取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:

[JavaScript] 纯文本查看 复制代码
document.cookie="ant=蚂蚁部落;path=/"

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/30/155230dtp1wm11oygwsxlp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面进行删除操作,代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/30/155239d3smzt4y2f0tk3y9.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

(1).key

(2).domain

(3).path

(4).secure

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

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

[JavaScript] 纯文本查看 复制代码
//取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("ant");
document.cookie;

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/30/155311i08tnn44heenn358.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部