http协议和cookie

最新推荐文章于 2022-04-20 06:11:22 发布

「已注销」

最新推荐文章于 2022-04-20 06:11:22 发布

阅读量324

点赞数 1

文章标签： javascript html5 前端后端

本文链接：https://blog.csdn.net/mikkfe/article/details/104849627

版权

一、http协议和cookie

服务器是怎么被访问的
地址（url）：https://www.baidu.com:443/xx/xx/xx/xx?xx=xx&xx=xx
http/https：传输协议
www.baidu.com：域名，地址
:80/:443：端口
/xx/xx/xx：服务器路径
?xx=xx&xx=xx：以某种方式向服务器发送的数据，其中某种方式为get/post
传输协议
http协议：超文本传输协议，它是一个简单的请求-响应协议，它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。
传输的规则：(1)客户与服务器建立连接；(2)客户向服务器发送请求；(3)服务器接受请求，并根据请求返回相应的文件作为应答；(4)客户与服务器关闭连接。
http和https的区别：http安全性不高，https是加密传输协议。
会话跟踪技术cookie：它的作用是跟踪每一次的连接，记录连接产生的信息，下一次连接的时候，信息会跟着一起发送过去。
cookie会随着http协议，发往服务器，其本身是一种本地存储。
域名/地址：标记了网络另一端的某个服务器的地址，域名是地址的别名，域名最终都要被解析成地址。
端口
服务器也是电脑，电脑里面有文件夹，客户通过网络访问服务器，其实是访问服务器中的文件夹。
服务器中的文件夹有256个，编号为0-255；每个文件夹中又有256个小文件夹，编号也是0-255。相当于服务器中有65536个小文件夹，要访问哪个文件夹，就指明这个文件夹的编号，这个编号就是端口，端口的范围是0-65536。
默认情况下，一些端口的功能被指定了：80:http协议默认端口;443:https协议的默认端口;3306:mysql数据库的默认端口。
服务器路径
端口表示服务器中的文件夹，文件夹里面是不是可以再套小文件夹，一直嵌套，只有外面两层被编了号，里面的小文件夹没有编号，这时就需要通过路径向里找双层嵌套里的小文件夹。
向服务器发送的数据
在访问这个服务器时，我们可能会主动向服务器提供一些数据，服务器中提前准备了程序，可以执行某些功能，如果功能需要这次请求携带数据，那么就在当前访问网址（url）上携带数据

二、会话跟踪技术cookie

描述：跟踪每一次的连接，记录连接产生的信息，下次连接，信息跟着一起发送过去。
特点：

只能存字符，文本
不允许跨域
时效性，默认会话级，关闭浏览器时可以删除
数量(50左右)和大小(4k)限制

密钥：加密的账号或密码。
安全问题：cookie中所有的内容，因为都是存在本地的文本，所以都是明文，只要能看到你的本地，就有可能看到你的cookie，所以在项目中千万不要在cookie中直接存账号密码，如果可以避免安全问题，就可以存。
cookie如何使用：cookie自身是document对象的一个属性，使用方式为：document.cookie
cookie的规则：document.cookie = 设置的cookie

必须是字符：""
字符内的格式要求：名=值，如：“user=admin”
一条代码只能设置一条cookie
设置cookie时，可以配置信息要求，有效期：“expires=日期对象”；路径：“path=/page”
cookie的内容和每个配置信息之间用：";"连接

cookie的工作场景：cookie自身其实对工作环境没有要求，但是cookie会随着http发往服务器，使用cookie的时候，需要记录客户端和服务器之间的信息，客户端是浏览器，服务器是本地服务器，所以导致，cookie最好也在服务器环境中使用。

三、设置cookie的语法

    // 设置默认的cookie
    document.cookie = "user=admin";
    document.cookie = "pass=123";
    // 在获取cookie时，document.cookie会一次性获取所有cookie，浏览器给我们返回的结果是以以下格式呈现：
    // "user=admin; pass=123"
    // 但是这个结果不影响设置格式，设置的时候该怎么设置还是怎么设置
    console.log(document.cookie);

    // 设置有有效期的cookie
    var d = new Date();
    d.setDate(d.getDate() + 3); //获取指定日期
    document.cookie = "abc=123;expires=" + d;

    // 设置cookie的路径
    document.cookie = "qwe=345;path=/";

    // 查询cookie时，无法获取当前cookie的有效期和路径
    // cookie的详细信息只能通过工具（浏览器的控制台）查看
    console.log(document.cookie);

    // 同时设置路径和有效期
    var d = new Date();
    d.setDate(d.getDate()+5);
    document.cookie = "zxc=456;path=/;expires"+d;

    // 删除某条cookie
    var d = new Date();
    d.setDate(d.getDate()-1);
    document.cookie = "zxc=456;path=/;expires=" + d;
    console.log(document.cookie);

    // 注意：
        // 相同的路径下只能存在一个重名cookie，重复设置相当于修改
            document.cookie = "a=10";
            document.cookie = "a=20";
        // 不同的路径可以存在重名cookie
            document.cookie = "a=10";
            document.cookie = "a=30";
            document.cookie = "a=20;path=/";
            document.cookie = "a=40;path=

具体的查看位置在控制台的以下位置

也可对cookie进行封装，具体代码如下：

function setCookie(key,val,ops){
    ops = ops || {};
    let e = "";
    if(ops.expires){
        var d = new Date();
        d.setDate( d.getDate() + ops.expires );
        e = ";expires="+d;
    }
    let p = ops.path ? ";path="+ops.path : "";
    document.cookie = `${key}=${val}${p}${e}`;
}
function getCookie(key){
    let strC = document.cookie;
    let arrC = strC.split("; ");
    for(var i=0;i<arrC.length;i++){
        if(arrC[i].split("=")[0] === key){
            return arrC[i].split("=")[1];
        }
    }
    return "";
}

function removeCookie(key,ops){
    ops = ops || {};
    ops.expires = -1;

    setCookie(key,"qweqwezzdasd",ops);
}

利用cookie函数实现页面登录中记住上一次登录的账号密码

<body>
    <div id="box">
        用户名：<input type="text" id="user"><br>
        密码：<input type="text" id="pass"><br>
        <input type="checkbox" id="remember">
        <label for="remember">记住账号密码7天</label>
        <input type="button" value="模拟的登录" id="btn">
    </div>
</body>
// 引入上面所封装的cookie函数
<script src="../cookie.js"></script>
<script>
    class Login{
        constructor(){
            this.user = document.getElementById("user");
            this.pass = document.getElementById("pass");
            this.remember = document.getElementById("remember");
            this.btn = document.getElementById("btn");
            this.addEvent();
            this.getUser();
        }
        getUser(){
            let msg = getCookie("user") ? JSON.parse(getCookie("user")) : {user:"",pass:""};
            this.user.value = msg.user;
            this.pass.value = msg.pass;
        }
        addEvent(){
            var that = this;
            this.btn.onclick = function(){
                that.u = that.user.value;
                that.p = that.pass.value;

                that.isSetCookie();
            }
        }
        isSetCookie(){
            if(this.remember.checked){
                let msg = {
                    user:this.u,
                    pass:this.p
                }
                setCookie("user",JSON.stringify(msg),{
                    expires:7
                });
            }
        }
    }
    new Login();
</script>