cookie

1.通信协议

通信协议，就是在互联网中，实体之间完成通信或服务所需要遵循的规则和约定。

语言交流的规则：语法，主谓宾如何排列。

说白了，就是咱俩说话用普通话还是家乡话，用英语还是法语，唱着说还是好好说，咱们提前规定好。这就是通信协议

2.TCP/IP

IP协议Internet Protocol，也可以称为IP地址，用来确定地址和区分网关。

TCP协议面向连接的协议（通信之间必须先建立连接）

于是，TCP相对可靠，它建立的连接的过程称为3次握手。

TCP连接的特点：

1.需要三次握手

2.所有的消息，需要对方确认送达

举例：

局域网游戏，一般多人联机对战，一人掉线，全部等待。说明玩家和玩家之间采用了TCP协议。

因为不允许丢失任何数据，不然有可能会出现两边不一致的情况：

我的画面把你杀死了，你的画面磕了个血瓶还活着

UDP面向数据包的协议（不可靠协议）

无需建立连接，发送消息也无需对方确认，无法保证数据的发送顺序，以及准确率

如：数据发送的顺序是a.......b.......c.......d

由于网络延迟，对方收到的信息可能是b.....d.....a....

UDP常用语视频、语音等通信（丢掉一帧画面是无所谓的）

TCP和UDP的区别，如果TCP是打电话（你一句我一句），那么UDP就是发短信（发送之后不知道对方是否收到）

3.HTTP

HTTP协议是一种无状态协议，基于TCP协议的一种高级协议，用于客户端和服务器之间的通信。

因为无法监听当前连接的状态，会导致每次请求页面，收到页面之后，连接会被断开

比如：打电话时我刚说完一句话，你就挂了电话。

购物时，登录账号密码，开始挑选商品，连接断卡，重新登陆，加入购物车继续挑选商品时，连接断开，重新登陆，继续选择商品加入购物车，重新登陆......解救剁手

如何解决这个问题呢？

一种新技术应运而生－－－－会话跟踪技术cookie。

会话跟踪技术，在一次会话从开始到结束的整个过程，全程跟踪记录客户端的状态（如：是否登录，购物车信息，是否下载，是否点赞，播放进度等等）

4.cookie的概念

cookie(会话跟踪技术)，相当于第一次跟服务器连接后，服务器给你发的一个身份牌，上面可以记录跟你有关的信息（是否登录，购物车等等信息），以后只要再跟服务器通信，必须带着这个令牌，这样一来，服务器会直接知道你身份牌上所有的信息。

cookie存在浏览器的缓存中。

什么是缓存？数据交换的缓冲区－－－－临时储存

5.cookie的特点

1.只能使用文本文件（如果浏览器可以随意在客户端机器生成文件，比如身份令牌，那将是个定时炸弹，安全问题会变得非常严重）

2.文件有大小限制4K（文件若没有大小限制，相当于身份令牌重几百斤，挂在脖子上什么感觉？）

3.数量限制，小于50条（一般浏览器限制大概在50条左右，门禁卡里能存下一部蓝光高清么）

4.读取有域名限制（不可跨域读取，只能由写入cookie的同一域名的网页进行读取。简单来说，谁写的cookie，谁才有权利读取）

5.时效限制（每个cookie有时效，最短的有效期是：会话级别(关闭浏览器，cookie销毁)；

注意：安全学的基本理论：密码锁每次打开都需要重新输入密码，如果只输入一次密码，以后不在验证，就没有安全可言）

6.cookie的使用

document.cookie

    设置
        会话级默认路径：
        document.cookie = "name=abc"
        cookie的格式要求，名称＝值
        在cookie 的名或值 中 不能使用分号（;）、逗号（,）、等号（=）以及空格这是cookie的赋值规则
        
        指定有效期：
        设置cookie的保存时间，通过给expires添加一个日期，设置cookie的过期时间
        此处可以借用Date();
        var date = new Date();
        date.setDate(date.getDate()+28);
        表示获取当前日期的天数，增加28天之后，重新设置给日期，此时date就表示未来的某个时间

        document.cookie = "name=abc;expires=" + date;
        此句表示，此条cookie在date的时间时效，而date的时间为当前日期加上28，也就是28天之后cookie失效
        
        指定路径：
        document.cookie = "user=admin;path=/;expires="+d;

    获取
        var str = document.cookie;
        str返回当前cookie的值，以字符串的形式
    
    删除
        删除cookie，相当于将cookie的有效时间设置为负。

7.cookie的封装

function setCookie(key,val,options){      //设置
    options = options || {};
    var time = "";
    if(options.expires){
        var d = new Date();
        d.setDate(d.getDate()+options.expires);
        time = ";expires="+d;
    }
    var path = "";
    if(options.path){
        path = ";path=" + options.path
    }
    document.cookie = key + "=" + val + time + path;
}
    
function getCookie(key){                             //获取
    var arr = document.cookie.split("; ");
    var v = "";
    arr.forEach((val)=>{
        if(val.split("=")[0] === key){
            v = val.split("=")[1];
        };
    })
    return v;
}

function removeCookie(key,options){           //删除
    options = options || {};

    options.expires = -1;
    setCookie(key,12321,options);
}

三十天自动获取账号密码的demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="../project/libs/bootstrap.css">
    <script src="cookie.js"></script>
    <style>
        span {display: none;}
    </style>
</head>
<body>
    <form>
        <label for="user">用户名为：</label>
        <input type="text" id="user" name="user" value=""><br>
        <label for="pass">密码为：</label>
        <input type="text" id="pass" name="pass" value=""><br>
        <label for="check">是否记住密码</label> 
        <input type="checkbox" name="check" id="check" value="y">
        <input type="button" id="button" value="登录"><br>
        <span>请不要再公共电脑上勾选此选项</span>
    </form>
</body>
<script>
   document.onselectstart = function(eve){
    eve.preventDefault();
   }
   class Login{
    constructor(){
        this.user = document.getElementById("user");
        this.pass = document.getElementById("pass");
        this.check = document.getElementById("check");
        this.span = document.querySelector("span");
        this.btn = document.getElementById("button");
        this.events();
        this.getCookie();
    }

    events(){
        var that = this;
        this.check.onclick = function(){
            that.onoff = this.checked;
            if(this.checked){
                that.span.style.display = "block";
            }else{
                that.span.style.display = "none";
            }
        }
        this.btn.onclick = function(){
            that.u = that.user.value;
            that.p = that.pass.value;
            if(!that.onoff) return;
            that.setCookie();
        }
    }

    setCookie(){
        var usermsg = {
            user:this.u,
            pass:this.p
        }
        setCookie("loginmsg",JSON.stringify(usermsg),{
            expires:30
        });
    }

    getCookie(){
        this.loginmsg = getCookie("loginmsg") ? JSON.parse(getCookie("loginmsg")) : {

            user:"",
            pass:""
        };
        this.user.value = this.loginmsg.user;
        this.pass.value = this.loginmsg.pass;
    }



   }

   new Login();
</script>
</html>