Cookie

什么是Cookie？

---

Cookie用于存储web页面的用户信息。

Cookie是一些数据，存储于你电脑的文本文件中。

当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie的作用就是用于解决“如何记录客户端的用户信息”：

• 当用户访问web页面时，他的名字可以记录在cookie中。
• 在用户下一次访问该页面时，可以在cookie中读取用户访问记录。

当浏览器从服务器上请求web页面时，属于该页面的cookie会被添加到该请求中。服务端通过这种方式来获取用户的信息。

Cookie存储数据的方式

---

1.、cookie以键值对形式存储数据，只能存储字符串，如下所示：

username=John Doe

2、cookie存储数据是有时效性的，如果超时 设定的时效性，浏览器会自动删除cookie

方式1：时间时效 是 世界标准时间

方式2：会话时效，浏览器打开 cookie 存在，浏览器关闭 cookie 删除

3、cook有访问路径

只有符合设定路径的文件 才能 访问调用cookie

4、cookie 前端程序 后端程序 都可以操作访问

5、cookie的操作设定 必须要通过 服务器运行

---

Cookie的操作语法

---

• PHP程序
• JavaScript程序

PHP设定cookie的函数方法：

setcookie(参数1,参数2,参数3,参数4);

参数1    键名

参数2    键值

参数3    时效

参数4    路径

只设定两个参数 键名键值

时效没有设定，默认执行会话时效session；路径没有设定，默认执行当前文件所在文件夹路径。如下所示:

setcookie('name' , '王昭没有君啊');

设定 时间时效

当前时间的时间戳 + 时效的秒数

time() 是PHP中获取当前时间的时间戳，单位是秒

time() + 10 时效是 当前时间 + 10秒

time() + 24*60*60 时效是 一天，如下所示:

setcookie('age' , 22 , time() + 24*60*60 );

设定路径，如下所示:

setcookie('sex' , '男' , time() + 24*60*60 , '/');

获取

$_COOKIE以数组的形式存储cookie键值对，如下所示:

print_r( $_COOKIE );

JavaScript操作cookie：

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

创建cookie，如下所示：

document.cookie = 'name=王昭没有君啊';

添加时间时效

添加的cookie时间时效应该是世界标准时间，应该是当前时间 - 8小时时差，添加的时效：当前时间戳 - 8小时毫秒 + 添加时效毫秒;如果没有输入时效，也就是空字符串，会执行会话时效，如下所示：

const time = new Date();
time.setTime(time.getTime() - 8*60*60*1000 + 24*60*60*1000);
document.cookie = `age=22;expires=${time}`;

添加路径

如果没有输入路径，也就是空字符串，会执行当前文件所在文件,如下所示：

document.cookie = `sex=男;expires=${time};path=/`;

在JavaScript中，可以使用以下代码来读取 cookie：

let str = document.cookie;

获取结果是cookie键值对，需要转化为对象

使用 JavaScript 删除 Cookie，只需要设置 expires 参数为以前的时间，特别注意的是：设定cookie时效为负数时，cookie的键名、路径，一定要和原始cookie保持一致，否则会认为是新的cookie的设定，不是修改原始cookie的时效。如下所示：

document.cookie = "name=王昭没有君啊;expires=-1;path=/";

封装一个简单的cookie函数

---

在实际项目中，我们不能用一遍cookie，就使用JavaScript操作一遍cookie，这样就会很繁琐，不利于开发，我们一定是把它封装为一个函数，随用随调，我把它封装在一个cookie.js文件中，如下所示：

//封装cookie函数
//参数1 cookie键名
//参数2 cookie键值
//参数3 cookie时效，默认值是空字符串，也就是没有输入时效，执行会话时效
//参数4 cookie路径，默认值是空字符串，也就是没有输入路径，执行当前文件所在文件夹
function mySetCookie(key, value, time='', path=''){
    //创建时间对象
    const timeObj = new Date();
    //设定时间戳
    timeObj.setTime(timeObj.getTime() - 8*60*60*1000 + time*1000);
    //设定cookie
    document.cookie = `${key}=${value};expires=${ time === '' ? '' : timeObj};path=${path}`;
}

//获取cookie函数
function myGetCookie(){
    //定义一个空对象存储结果
    const obj = {};
    //获取cookie键值对字符串
    let str = document.cookie;
    
    //以分号空格为间隔符转化为数组
    const arr1 = str.split('; ');
    //循环遍历数组，以等号为间隔，转化为数组
    arr1.forEach(item =>{
        const arr2 = item.split('=');
        obj[arr[0]] = arr2[1];
    })
    
    //返回这个对象
    return obj;
}