JavaScript中Cookie的使用——设置失效时间

1.什么是Cookie?

1.1简介

主要用于存储访问过的网站数据,存储浏览器的信息到本地计算机中,用于客户端和服务器端的通讯

Cookie 是为了解决“如何记住用户信息”而发明的:

  • 当用户访问网页时,他的名字可以存储在 cookie 中。
  • 下次用户访问该页面时,cookie 会“记住”他的名字。

注意:如果浏览器完全禁止cookie,大多数网站的基本功能都将无法正常使用,chrome浏览器不支持本地文件的cookie的读取

1.2特点

  • 以文本形式保存(.txt)
  • cookie存储信息不安全(不能存放重要的信息)
  • cookie中有域(domain)和路径的概念,浏览器是一个比较安全的环境,所以不同的域之间不能直接访问(js的同源策略限制)

2.JavaScript操作Cookie

2.1基础操作

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

document.cookie='name=托马'
console.log(document.cookie)

在这里插入图片描述
Cookie的常用属性:
在这里插入图片描述

name cookie的名字(键)
value cookie存放的值
expires:指cookie过期的时间(该时间为世界时间  UTC时间)也称为格林威治时间
max-age:指cookie最大的存活有效期(单位:秒)
domain: 指的是cookie当前的域
path:指cookie当前的路径
size:指cookie存放的大小
secure:指cooke的安全属性

注意:expires和max-age的默认值为session代表关闭浏览器,该cookie则清空、失效

2.2设置失效时间

需求:设置一个60分钟后失效的Cookie

function setCookie(name,val,min){
    var now=new Date();
    //设置时间
    now.setMinutes(now.getMinutes()+min)

    //设置Cookie
    document.cookie=name+'='+val+';expires='+now.toUTCString()
}
setCookie('托马','火',60)

控制台显示的失效时间
在这里插入图片描述
系统当前时间:
在这里插入图片描述
一个小时候的时间应该为16:55,但控制台输出的是08:55,因为这个时间是世界时间 (UTC时间),也称为格林威治时间。百度一下查得:
在这里插入图片描述
所以8:55+8:00=16:55,我们设置的失效时间成功。

提前清除缓存:

function setCookie(name,val,min){
   var now=new Date();
      //设置时间
      now.setMinutes(now.getMinutes()+min)

      //设置Cookie
      document.cookie=name+'='+val+';expires='+now.toUTCString()
  }
  setCookie('托马','火',1)

//通过一次性定时器提前清除Cookie
setTimeout(function(){
	setCookie('托马','',-1)
},3000)
//	setCookie('托马','',-1)
//第一个参数一定要对应,不然找不到这个Cookie
//第二个参数可写可不写
//第三个参数设置为-1

演示结果:
在这里插入图片描述

### 不设置Cookie过期时间的行为分析 当未设置Cookie的过期时间时,该Cookie会被视为**会话Cookie(Session Cookie)**[^1]。这种类型的Cookie不会被永久存储在用户的设备上,而是在浏览器关闭后自动删除。具体行为如下: - **生命周期**:会话Cookie仅存在于当前浏览器会话期间,在用户关闭浏览器窗口或标签页后即失效并被清除[^3]。 - **用途**:这类Cookie通常用于临时性的操作场景,比如跟踪用户的单次访问状态或者购物车中的商品列表。 - **技术细节**:由于缺少`Expires`或`Max-Age`属性定义,服务器无法指示客户端保留这些数据超过当前浏览会话的时间范围[^2]。 #### HTTP协议下的影响 如果在一个基于HTTP通信的应用程序中使用了无过期时间设定的Cookies,则意味着每一次新的浏览器启动都需要重新验证身份或其他必要信息[^4]。例如登录过程可能需要频繁输入用户名密码而不是保持长久在线状态。 以下是创建一个简单会话Cookie的例子: ```javascript document.cookie = "username=JohnDoe"; // 这里没有指定expires参数,因此它是一个session cookie. ``` 对于开发者而言需要注意的是,尽管可以通过编程手段控制何时移除此类短期存在的cookies (如调用JavaScript方法 `document.cookie="";`) ,但在大多数情况下它们仍然遵循上述提到的标准流程——随同浏览器实例结束一起消失不见。 ### 结论 综上所述,如果不为Cookie设置任何有效期标记(`Expires` 或者 `Max-Age`) ,那么此Cookie将成为一种短暂形式的存在—只存活于单一浏览过程中;一旦关联它的那个特定web session终止(通常是因使用者退出应用或是直接关闭相应网页),那随之而来的一切关于这个特殊标识符的数据记录都将荡然无存。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值