【Web】Cookie 用法

一、基本介绍

• cookie 用途：

- 假设我登录以后，我的cookie里面保存一条信息，这个信息过期时间是7天
	- 不管我是不是关闭浏览器，只要不清除缓存，这个cookie就会一直在里面
	- 7天以后过期
- 当我登录的时候：
	- 我先查看一下cookie里面有没有我之前保存的信息
	- 如果有，那么直接按照登录完成处理
	- 如果没有，就按照没有登录处理
- 只要我登录一次：
	- 7天以内就可以保存这个登录信息
	- 7天以内就不用再次登录了，每次打开网站都会按照登录完成处理
	- 7天以后，就需要重新登录一次
	- 即实现7天免登录功能

• cookie：是一个以字符串的形式存储数据的位置

- 每一个HTTP请求都会在请求头中携带cookie到服务端
- 每一个HTTP响应都会在响应头中携带cookie到客户端
- 也就是说，cookie是不需要我们手动设置的，就会自动在客户端和服务端之间游走的数据
- 我们只是需要设置下cookie的内容就可以了

• cookie是以字符串的形式存储，在字符串中以key=value的形式出现，每一个key=value是一条数据，多个数据之间以;分割。

// cookie的形态
`a=100; b=200; c=300;`

• cookie 的特点

- 按照域名存储：也就是说谁设置的谁才能读取
- 有时效性：也就是有过期时间，
	1. 默认是**会话级别**（也就是浏览器关闭就过期了）
	2. 可以手动设置
-  存储大小有限制：一般是4kb或50条左右
- 前后端都可以操作：
	1. 前端通过js操作
	2. 后端通过后端语言操作
- 请求自动携带：
	1.  当你的cookie空间里面有内容的时候
	2. 只要是当前域名下的任意一个请求，都会自动携带cookie放在请求头里面
	3. cookie里面有多少自动携带多少
	4. cookie中没有内容就不会携带了

二、前端操作

2.1、设置 cookie

• 语法：document.cookie = "key=value";
• 注意：一次只能设置一条cookie，如果要设置两条，就要书写两次
• 设置cookie的时效性
  • 不设置的时候，默认是会话时效（关闭浏览器就消失）
  • 设置cookie的时效性，就是给cookie设置修饰
    • document.cookie = "key=value; 修饰信息1=修饰的值1;修饰信息2=修饰的值2"
    • 设置过期时间：document.cookie = "key=value; expires = 时间对象"
    • 设置有效路径：document.cookie = "key=value; path=路径"（path如果不设置，默认是当前目录路径）
• 设置cookie的时间问题
  • 我们使用new Date()拿到的是我们终端的时间，也就是+8时区的时间
  • 假设我们new Date() 拿到的是9:30
  • 但是这个cookie在我们终端的时间是17::30
  • 如果你想让cookie当前时间过期
  • 那么那么你拿到的终端时间要-8小时

// 增加一条cookie
document.cookie = 'a=100';

// 再增加一条cookie
document.cookie = 'b=hello';

// 设置有过期时间的cookie
var date = new Date('2022/2/12');
document.cookie = "c=200; expires="+date;

// 设置cookie的path
document.cookie = "d=300;path=/";

// 设置一个cookie在5秒后过期
var date1 = new Date();
// 把当前时间往前推8个小时消失，在增加5秒时间
date1.setTime(date1.getTime()-8*60*60*1000+5*1000);
document.cookie = "e=200;expires="+date1;

// 设置一个有过期时间的cookie
document.cookie = 'f=100; expires=Thu,18 Dec 2043 12:00:00 GMT';// 上面这个 cookie 数据会在 2043 年 12 月 18 日 12 点以后过期，过期后会自动消失

// 获取cookie
console.log(document.cookie);

• 函数封装：

/**
 * setCookie 用于设置 cookie
 * @param {STRING} key  要设置的 cookie 名称
 * @param {STRING} value  要设置的 cookie 内容
 * @param {NUMBER} expires  过期时间
 */
function setCookie(key, value, expires){
	const time = new Date();
	time.setTime(time.getTime()-1000*60*60*24*8+expires);
	document.cookie = `${key}= ${value}; expires=${time}`;
}

2.2、删除 cookie

• cookie是不能删除的
• 如果你不想要这个cookie了
• 那么就把这个cookie的过期时间设置成当前时间以前，那么就是删除

// 先设置一条cookie
document.cookie = "name=zhangsan";
// 在删除这条cookie
var date = new Date();
date.setTime(date.getTime()-8*60*60*1000-1);
document.cookie = "name=zhangsan;path=/;expires="+date;

• 函数封装：

/**
 * delCookie 删除 cookie 中的某一个属性
 * @param {STRING} name 你要删除的某一个 cookie 属性的名称
 */
function delCookie(name){
	setCookie(name,1,-1);
}

2.3、获取cookie

• js获取cookie：document.cookie
• 他不能获取单一一条数据，只能把所有cookie都获取到

document.cookie = "aa=100";
document.cookie = "bbb=200";
document.cookie = "c=300";
document.cookie = "ac=60";
console.log(document.cookie);

var key = "ac";
var result;	//结果保存在这个变量里面
var str = document.cookie;	//"a=500; aa=100; bbb=200; c=300; ac=60"

//先把字符串以“; ”为分隔符，变成一个数组:['a=500','aa=100','bbb=200','c=300','ac=60']
var arr = str.split("; ");

// 遍历数组arr，看数组里面每一项
for(var i=0; i<arr.length; i++){
	// arr[0] = "a=500"
	// 把arr[i]以=为分隔符，前面是key，后面是value
	var tempArr = arr[i].split("=");//['a','500']
	if(tempArr[0]==key){
		// 如果这一项=前面的内容和key相同，=后面的值就是我们要的值，循环结束
		result = tempArr[1];
		break;
	}
	// 如果这一项的=前面的内容和key不相同，=后面的值就不是我们要的值，继续下一次
}
console.log(result);

• 函数封装：

/**
 * getCookie 获取 cookie 中的某一个属性
 * @param {STRING} key 你要查询的 cookie 属性
 * @return {STRING} 你要查询的那个 cookie 属性的值
 */
function getCookie(key){
	const cookieArr = document.cookie.split('; ');//这里 ; 号后面有个空格不能漏
	let value = '';
	cookieArr.forEach(item=>{
		if(item.split('=')[0] === key){
			value = item.split('=')[1];
		}
	})
	return value;
}

三、后端操作

3.1、设置cookie

• 语法：setcookie(key,value,过期时间);
  • key：要设置的cookie的名称
  • value:要设置的cookie的值
  • 过期时间：可以不写，默认是会话时效
• 后端获取时间对象使用time()方法
  • 拿到的是世界标准时间，单位为秒
  • 当前时间15秒以后：time()+15
  • setcookie('php','200',time()+15);
• 后端修改cookie
  • 也是使用setcookie这个方法
  • 从新设置一次就可以了
  • setcookie('a',100);
  • setcookie('a',200);

<?php
// 添加cookie,15秒后过期
setcookie('php',200,time()+15);
// 修改cookie,过期时间不写相当于改回默认过期时间
setcookie('php',100);
?>

3.2、删除cookie

• 后端删除cookie
  • 也是使用setcookie这个方法
  • 只不过cookie的过期时间设置成当前时间之前
  • setcookie('a','hello',time()-1);

<?php
// 删除cookie
setcookie('php',100,time()-1);
?>

3.3、获取cookie

• 后端获取cookie
  • 前端发送请求的时候cookie会携带在请求头里面
  • PHP有一个预定义变量叫做$_COOKIE
  • 是一个关联型数组，类似$_GET/$_POST
  • 里面存储的就是一个个的cookie信息
  • 你要哪一个，就直接从$_COOKIE里面取出来即可

<?php
// 获取cookie
$php = $_COOKIE['php']; //$php=100
?>