cookie的意义
- 假设我登录以后，我的cookie里面保存一条信息，这个信息过期时间是7天
- 不管我是不是关闭浏览器，只要不清除缓存，这个cookie就会一直在里面
- 7天以后过期
- 当我登录的时候：
- 我先查看一下cookie里面有没有我之前保存的信息
- 如果有，那么直接按照登录完成处理
- 如果没有，就按照没有登录处理
- 只要我登录一次：
- 7天以内就可以保存这个登录信息
- 7天以内就不用再次登录了，每次打开网站都会按照登录完成处理
- 7天以后，就需要重新登录一次
- 即实现7天免登录功能
cookie是什么
cookie是一个以字符串的形式存储数据的位置- 每一个HTTP请求都会在请求头中携带cookie到服务端
- 每一个HTTP响应都会在响应头中携带cookie到客户端
- 也就是说，cookie是不需要我们手动设置的，就会自动在客户端和服务端之间游走的数据
- 我们只是需要设置下cookie的内容就可以了
cookie的存储形式
- cookie是以字符串的形式存储，在字符串中以
key=value的形式出现
- 每一个
key=value是一条数据
- 多个数据之间以
;分割
`a=100; b=200; c=300;`
cookie的特点
- 按照域名存储：也就是说谁设置的谁才能读取
- 有时效性：也就是有过期时间，
- 默认是会话级别（也就是浏览器关闭就过期了）
- 可以手动设置
- 存储大小有限制：一般是4kb或50条左右
- 前后端都可以操作：
- 前端通过js操作
- 后端通过后端语言操作
- 请求自动携带：
- 当你的cookie空间里面有内容的时候
- 只要是当前域名下的任意一个请求，都会自动携带cookie放在请求头里面
- cookie里面有多少自动携带多少
- cookie中没有内容就不会携带了
JS操作cookie
添加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小时
document.cookie = 'a=100';
document.cookie = 'b=hello';
var date = new Date('2022/2/12');
document.cookie = "c=200; expires="+date;
document.cookie = "d=300;path=/";
var date1 = new Date();
date1.setTime(date1.getTime()-8*60*60*1000+5*1000);
document.cookie = "e=200;expires="+date1;
document.cookie = 'f=100; expires=Thu,18 Dec 2043 12:00:00 GMT';
console.log(document.cookie);
删除cookie
- cookie是不能删除的
- 如果你不想要这个cookie了
- 那么就把这个cookie的过期时间设置成当前时间以前，那么就是删除
document.cookie = "name=zhangsan";
var date = new Date();
date.setTime(date.getTime()-8*60*60*1000-1);
document.cookie = "name=zhangsan;path=/;expires="+date;
获取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;
var arr = str.split("; ");
for(var i=0; i<arr.length; i++){
var tempArr = arr[i].split("=");
if(tempArr[0]==key){
result = tempArr[1];
break;
}
}
console.log(result);
JS操作cookie封装
- 因为js中没有专门操作cookie增删查改的方法
- 所以需要我们自己封装一个方法
设置cookie
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}`;
}
删除cookie
function delCookie(name){
setCookie(name,1,-1);
}
获取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;
}
PHP操作cookie
添加cookie
- 语法：
setcookie(key,value,过期时间);
- key：要设置的cookie的名称
- value:要设置的cookie的值
- 过期时间：可以不写，默认是会话时效
- 后端获取时间对象使用time()方法
- 拿到的是世界标准时间，单位为秒
- 当前时间15秒以后：time()+15
setcookie('php','200',time()+15);
修改cookie
- 后端修改cookie
- 也是使用setcookie这个方法
- 从新设置一次就可以了
setcookie('a',100);setcookie('a',200);
删除cookie
- 后端删除cookie
- 也是使用setcookie这个方法
- 只不过cookie的过期时间设置成当前时间之前
setcookie('a','hello',time()-1);
获取cookie
- 后端获取cookie
- 前端发送请求的时候cookie会携带在请求头里面
- PHP有一个预定义变量叫做
$_COOKIE
- 是一个关联型数组，类似
$_GET/$_POST
- 里面存储的就是一个个的cookie信息
- 你要哪一个，就直接从
$_COOKIE里面取出来即可
代码演示
<?php
setcookie('php',200,time()+15);
setcookie('php',100);
$php = $_COOKIE['php'];
setcookie('php',100,time()-1);
?>