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;
}

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王昭没有君啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值