一文讲Cookie

本章学习目录

页内目录
一，Cookie的介绍
二，JavaScript实现Cookie的添加
三，JavaScript实现Cookie存活期的设置
四，JavaScript实现数据的读取
五，JavaScript实现Cookie的读取
六，JavaScript实现Cookie的删除

一，Cookie的介绍（小编对百度文库基于Cookie的介绍做以简单整理）

Cookie的介绍：有时也用其复数形式 Cookies。是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息
Cookie的组成：是一段不超过4KB的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。
1. Name/Value：设置Cookie的名称以及相对应的值
2. Expires属性：设置Cookie的生存期
3. Path属性：定义web站点上可以访问该Cookie的目录
4. Domain属性：指定了可以访问该Cookie的Web站点和域
5. Secure属性：指定是否使用HTTPS安全协议发送Cookie
6. HTTPOnly属性：用于防止客户端脚本通过document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改
Cookie的安全威胁：Cookie的捕获/重放；恶意Cookie；会话定制；CSRF攻击
Cookie的安全防护：Web服务器端防护；客户端浏览器防护；主机的安全防护
Cookie的认证机制：即用户只需要在初次登陆时输入信息，随后可以访问被授权的所有站点资源，不需要手动提交身份信息；分为三个阶段：1. 发布Cookie；2. 检索Cookie；3. 验证Cookie

二，JavaScript实现Cookie的添加

在<button>标签中设置onclick事件（即点击事件）

<button onclick="addCookie()">添加Cookie</button>
<button onclick="readCookie()">读取Cookie</button>
<button onclick="deleteCookie()">删除Cookie</button>

浏览器界面就有了三个按钮
在<script>标签中定义对应的函数
在函数中写入：document.cookie="id=117";就成功添加了一个Cookie

javascript">     function addCookie() {
         document.cookie="id=117";
        }

点击添加Cookie按钮后，依次点击点击F12–>点击Application–>Cookie–>http…即可查看该Cookie

三，JavaScript实现Cookie存活期的设置

获得时间对象；
获得当前毫秒数；
给当前毫秒数+想要该Cookie存活的毫秒数；
给该事件对象设置毫秒数；
设置Cookie的name和value，expires存活期即图中的三处通过JavaScript代码设置
在函数中代码如下

javascript">    function addCookie() {
        document.cookie="id=117";
        let date=new Date();//获得时间对象
        date.setTime(date.getTime()+7*24*60*60*1000);//设置时间
        document.cookie="password=6666;expires="+date;//以拼接字符串的形式设置name，value，expires

今天是6月20，存活期设置到了6月27
这里的seesion代表的是一次会话；即一次浏览器的关闭；
而对应的事件则代表该Cookie的截至日期
相信其它属性的添加各位应该已经可以见微知著了

四，JavaScript实现数据的读取

读取Cookie首先要学会在查看对象所代表的对应值（类似于Java中的打印，不过Java中是通过控制台输出内容，而JavaScript可以通过两种方式查看，下面以弹出date为例）
第一种（在界面查看）：console.log(对象);

javascript">    function readCookie() {
        let date = new Date("Sun Jun 20 2021 13:18:18");
        console.log(date);
    }

在浏览器界面，点击F12–>点击按钮读取Cookie；即可获得console.log(date);打印的信息
第二种（在浏览器界面弹出）：alert(对象);

javascript">    function readCookie() {
        let date = new Date("Sun Jun 20 2021 13:18:18");
        // console.log(date);//通过界面查看
        alert(date);//弹出窗口查看
    }

在这里插入图片描述

五，JavaScript实现Cookie的读取

上面学习了数据的读取；那么我们试着读取一下Cookie；为了更清晰的观察，我们添加了id=117; name=yyx; age=20; password=6666并且设置了password的存活期为7天后；

javascript">    function readCookie() {
        //从浏览器中获得Cookie；此处获得的是当前路径下可以获得的所有的Cookie，返回一个字符串
        let cookie = document.cookie;
        console.log(cookie);
    }

为了得到单个数据我们用split();方法对其进行处理

javascript">    function readCookie() {
        //从浏览器中获得Cookie；此处获得的是当前路径下可以获得的所有的Cookie，返回一个字符串
        let cookie = document.cookie;
        console.log(cookie);//得到：id=117; name=yyx; age=20; password=6666
        //split()方法：将一个字符串分割成字符串数组
        let cookieArr = cookie.split(";");
        console.log(cookieArr[0]);
        console.log(cookieArr[1]);
        console.log(cookieArr[2]);
        console.log(cookieArr[3]);
    }

很明显中间的两个由空格，为了得到准确的数据，用trim();对空格进行截取

javascript">    function readCookie() {
        //从浏览器中获得Cookie；此处获得的是当前路径下可以获得的所有的Cookie，返回一个字符串
        let cookie = document.cookie;
        console.log(cookie);//得到：id=117; name=yyx; age=20; password=6666
        //split()方法：将一个字符串分割成字符串数组
        let cookieArr = cookie.split(";");
        console.log(cookieArr[0].trim());
        console.log(cookieArr[1].trim());
        console.log(cookieArr[2].trim());
        console.log(cookieArr[3].trim());
    }

在这里插入图片描述

这里我们就得到了准确数据，因为Cookie是用来辨别用户身份的，所以我们只需要后面的值；故再用split();方法得到具体数据，如得到117，yyx，20，6666

javascript">    function readCookie() {
        //从浏览器中获得Cookie；此处获得的是当前路径下可以获得的所有的Cookie，返回一个字符串
        let cookie = document.cookie;
        console.log(cookie);//得到：id=117; name=yyx; age=20; password=6666
        //split()方法：将一个字符串分割成字符串数组
        let cookieArr = cookie.split(";");
        let strpass = cookieArr[0].trim();//得到password=6666
        let strid = cookieArr[1].trim();//得到id=117
        let strname = cookieArr[2].trim();//得到name=yyx
        let strage = cookieArr[3].trim();//得到age=20
        //根据=将字符串分成长度为2的数组
        let strpassArr = strpass.split("=");
        console.log(strpassArr[0]);//password
        console.log(strpassArr[1]);//6666
    }

很明显我们要读取的Cookie数据是6666
其它的读取方式一致

六，JavaScript实现Cookie的删除

删除Cookie，其实就是将Cookie的存活期设置为过期时间
首先了解两个时间；这两个时间是本人同一时间获得的；说明格林威治时间比我们中国的标准时间早8h
Sun Jun 20 2021 16:08:21 GMT+0800 (中国标准时间)：通过Date date=new Date();date所表示的时间
Sun, 20 Jun 2021 08:08:21 GMT (格林威治时间)：通过date.toGMTString()得到的时间，
正如我们前面设置的是中国的时间，但在浏览器界面显示的是格林威治时间一样
我们想要删除该Cookie，
就是让时间过期；
就是让格林威治时间过期
就是让中国的时间-8h过期
所以我们可以有两种形式的删除方式（具体删除在14行后）：

javascript">    function deleteCookie() {
        //从浏览器中获得Cookie；此处获得的是当前路径下可以获得的所有的Cookie，返回一个字符串
        let cookie = document.cookie;
        console.log(cookie);//得到：id=117; name=yyx; age=20; password=6666
        //split()方法：将一个字符串分割成字符串数组
        let cookieArr = cookie.split(";");
        //由于获得的cookie顺序不一；所以全部循环找出想要删除的键 如：password
        for (let i=0;i<cookieArr.length;i++){
            //因为数组中间的信息存在空格所以.trim()
            let strpass = cookieArr[i].trim();//得到password=6666
            //将password=6666分成password和6666
            let strpassArr = strpass.split("=");
            if (strpassArr[0]=="password"){
                let date = new Date();
                //删除法一
                // date.setTime(date.getTime()-8*60*60*1000);
                // document.cookie=strpass+";expires="+date;
                //删除法二
                document.cookie=strpass+";expires="+date.toGMTString();//该行等于上面两行
            }
        }
    }

一文讲Cookie

本章学习目录

一，Cookie的介绍（小编对百度文库基于Cookie的介绍做以简单整理）

二，JavaScript实现Cookie的添加

三，JavaScript实现Cookie存活期的设置

四，JavaScript实现数据的读取

五，JavaScript实现Cookie的读取

六，JavaScript实现Cookie的删除

相关文章

ADO.NET中Command对象检索和操作数据库

DBeaver使用-Hive-Phoenix链接hbase-Doris

MySQL 审核工具 Inception

为什么在设置Cookie时要设置成GMT格式

多个linkbutton公用同一个事件

FR大屏展示

黄聪：Destoon供求栏目下旺旺无法正常显示，点击提醒“会员名不存在”

面试笔试易错知识点Java篇三