JavaScript 设置cookie 过期时间

2019-8-5 21:27| 作者: admin| 查看: 2843| 评论: 0|来自: 蚂蚁部落

项目中,使用cookie存储一些安全性要求低,且量较小的数据是一个不错的选择。

比如比较典型的,记忆用户名和密码,或者保持用户喜爱的页面风格等。

通常要给cookie设置一个过期时间,下面将对其做一下详细介绍。

一.cookie存储方式:

服务器发送到浏览器的cookie存在两种存储方式:

(1).如果设置过期时间,那么cookie将存储在本地硬盘,过期会自动删除。

(2).如果不设置过期时间,那么cookie存在于计算机内存中,当会话结束或者关闭浏览器窗口,将删除cookie。

二.设置过期时间:

cookie具有两个属性可以规定cookie的过期时间。

(1).通过Expires属性设置过期时间:

可以通过响应头设置cookie的过期时间,代码如下:

[JavaScript] 纯文本查看 复制代码
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

作者比较懒,上述代码来自于MDN,Expires时间是UTC 格式。

UTC格式可以通过Date对象的toUTCString()转换。

当然我们可以通过JavaScript来设置Expires属性,代码如下:

[JavaScript] 纯文本查看 复制代码
document.cookie="name=value;expires=date"

date也是UTC格式,下面是一个可以设置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();
}

(2).通过Max-Age属性设置过期时间:

通过Max-Age同样可以设置cookie的过期时间。

Max-Age属性值是一个数字,单位是秒,用来指定cookie从现在开始存在的秒数。

超过这个这个秒数,那么cookie立马过期;如果同时设置Max-Age与Expires,那么Max-Age优先级更高。

下面看一段利用此属性封装的设置cookie过期时间的代码:

[JavaScript] 纯文本查看 复制代码
function setcookie(name, value, daysTolive) {
  let cookie = name + "=" + encodeURIComponent(value);
  if (typeof daysTolive === "number")
    cookie += "; max-age =" + (daysTolive * 60 * 60 * 24);
  document.cookie = cookie;
}
setcookie("ant","蚂蚁部落",0);

代码分析如下:

(1).函数第一个参数是cookie名称。

(2).函数第二个参数是cookie的值。

(3).函数第三个参数是一个数字,规定多少天后过期,60 * 60 * 24表示24小时。

(4).如果第三个参数设置为0,则表示设置当前cookie立即过期。

三.过期时间依据本地时间:

cookie的过期时间是依据浏览器所在的计算机本地时间,这一点需要特别注意。

所以虽然在服务器设置了一个过期时间,但是在本地可能并不能达到要求。

比如在服务器设置在3年后过期,如果将本地时间手动时间调整到三年后,那么此cookie会立马过期。

关于cookie的更多内容可以参阅其他相关章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部