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

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐