码迷,mamicode.com
首页 > 其他好文 > 详细

cookie

时间:2019-12-21 19:02:15      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:def   表示   ip协议   点赞   打开   hat   游戏   doctype   name   

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>

 

 
 
 
 
 

cookie

标签:def   表示   ip协议   点赞   打开   hat   游戏   doctype   name   

原文地址:https://www.cnblogs.com/wuziqiang/p/12077596.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!