通信协议、Cookie及本地存储

一、通信协议

通信协议是指双方实体完成通信或服务所必须遵循的规则和约定。在计算机通信中，通信协议用于实现计算机与网络连接之间的标准，网络如果没有统一的通信协议，电脑之间的信息传递就无法识别。通信协议是指通信各方事前约定的通信规则，可以简单地理解为各计算机之间进行相互会话所使用的共同语言。两台计算机在进行通信时，必须使用的通信协议。

TCP/IP

Transmission Control Protocol / Internet Protocol的简写，中译名为传输控制协议/因特网互联协议，又名网络通讯协议，是Internet最基本的协议、Internet国际互联网络的基础，由网络层的IP协议和传输层的TCP协议组成。TCP/IP 定义了电子设备如何连入因特网，以及数据如何在它们之间传输的标准。

HTTP

HTTP---超文本传输协议（HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。HTTP是一个客户端和服务器端请求和应答的标准（TCP）。客户端是终端用户，服务器端是网站。通过使用Web浏览器、网络爬虫或者其它的工具，客户端发起一个到服务器上指定端口（默认端口为80）的HTTP请求。

HTTP 的工作流程

和服务器建立链接（http的三次握手）
建立链接后，发送一个请求给服务器（请求request）
服务器接受到请求以后进行相应的处理并给出一个回应（响应response）
断开与服务器的链接（http的四次挥手）

一次完整的HTTP事务的过程

域名解析
发起TCP的3次握手
建立TCP连接后发起http请求
服务器端响应http请求，浏览器得到html代码
浏览器解析html代码，并请求html代码中的资源
浏览器对页面进行渲染呈现给用户

http 三次握手第一次握手：建立连接时，客户端发送syn报文（同步序列号）到服务器，并进入SYN_SEND状态，等待服务器确认；第二次握手：服务器收到syn报文，必须确认客户端的syn报文，同时自己也发送一个SYN报文，即SYN+ACK（确认序列），此时服务器进入SYN_RECV状态；第三次握手：客户端收到服务器的SYN+ACK报文，向服务器发送确认报文ACK，此包发送完毕，客户端)和服务器进入ESTABLISHED状态，完成三次握手。完成三次握手，客户端与服务器端开始传送数据。

HTTP和HTTPS的区别

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。默认HTTP的端口号为80，HTTPS的端口号为443。

HTTP协议的关键字段解释

打开谷歌浏览器，进入控制台

在浏览器中打开百度网页，在打开的控制台中点击“Network”—>“XHR”—>“Headers”

Request URL：请求的URL地址
Request Method：GET，这里表示请求的类型是GET类型，常见的还有POST 等类型。
Status Code：200OK，这里的200OK是HTTP的响应状态码，200表示正常，没有错误信息。
Cookie：Cookie ，表示一个保存在客户机中的简单的文本文件, 这个文件与特定的Web文档关联在一起, 保存了该客户机访问这个Web文档时的信息, 当客户机再次访问这个Web文档时这些信息可供该文档使用。
Host：这里的Host指的是网站的网络服务器。
Content-Type：内容类型，一般是指网页中存在的Content-Type，用于定义网络文件的类型和网页的编码，决定文件接收方将以什么形式、什么编码读取这个文件。
User-Agent：User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。

常见的 HTTP 响应状态码

分类	分类描述
1**	信息，服务器收到请求，需要请求者继续执行操作
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误


200	SC_OK	意思是一切正常。一般用于相应GET和POST请求。

301	Moved Permanently	永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302	Found	临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303	See Other	查看其它地址。与301类似。使用GET和POST请求查看
304	Not Modified	未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

400	Bad Request	客户端请求的语法错误，服务器无法理解
401	Unauthorized	请求要求用户的身份认证
403	Forbidden	服务器理解请求客户端的请求，但是拒绝执行此请求
404	Not Found	服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

500	Internal Server Error	服务器内部错误，无法完成请求
501	Not Implemented	服务器不支持请求的功能，无法完成请求
502	Bad Gateway	作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503		服务器过载或者维护

常见的 HTTP 请求方式

GET 请求

从安全性方便,get请求相对来说,安全低一点
参数以 querystring 的形式发送，也就是直接拼接在请求路径的后面
GET 请求会被浏览器主动缓存
GET 请求根据不同的浏览器对长度是有限制的
IE： 2083 个字符
FireFox： 65536 个字符
Safari： 80000 个字符
Opera： 190000 个字符
Chrome： 8182 个字符
APACHE(server)：理论上接受的最大长度是 8192 个字符（有待商榷）
对参数的类型有限制，只接受 ASCII 码的格式

POST 请求

post传输的数据在body里面,相对与get比较安全
参数以 request body的形式发送，也就是放在请求体中
POST 请求不会被浏览器主动缓存，除非手动设置
POST 请求理论上是没有限制的，除非服务端做了限制
对参数类型没有限制，理论上可以传递任意数据类型，只不过要和请求头对应
传递的数据类型,一般是json数据类型

get和post的区别总结

安全性方面,post请求削微要优于get
性能方面,get请求要比post请求快一点,所以如果做数据查询,一般都使用get请求
传输内容的大小,get请求有限制,不同的浏览器不太一样,post理论上没有限制
传递的参数 get放在url里面 post放在请求体里面
传递的数据类型 post可以传递任意数据类型 get传递的是字符串类型

Cookie又叫会话跟踪技术，是由Web服务器保存在用户浏览器上的小文本文件，它可以包含相关用户的信息。无论何时用户链接到服务器，Web站点都可以访问Cookie信息。

存储大小有限制，一般是 4 KB 左右
数量有限制，一般是 50 条左右
有时效性，也就是有过期时间，一般是 会话级别 （也就是浏览器关闭就过期了）
在同源的页面中 cookie是可以共享的
同源页面 === 同源策略 === 只有以下三个都相同才算同源
1. 同协议，同域名，同端口

2.2 使用方式

设置，读取，删除，都是通过document.cookie

const cookie = document.cookie
console.log(cookie) // 就能得到当前 cookie 的值

cookie 的设置为字符串格式，document.cookie = 'key1=value2; key1=value2' 不同的cookie用;隔开

// 设置一个时效性为会话级别的 cookie
document.cookie = 'a=100'

cookie的过期时间用expires属性设置，需要设置一个具体日期格式的值

// 设置一个有过期时间的 cookie
document.cookie = 'b=200;expires=Thu, 18 Dec 2043 12:00:00 GMT";'

上面这个 cookie 数据会在 2043 年 12 月 18 日 12 点以后过期，过期后会自动消失
cookie 的时间默认是按照 utc时间（世界时间）设置的，以上书写太麻烦，主要是书写形式复杂
我们所处在东八区，比世界时间多 8小时，所以减去 8小时

var d = new Date()

d.setTime(d.getTime() - 1000*60*60*8 +   1000 * 多久过期(秒));

例如：

// 20秒后过期
var d = new Date()
d.setTime(d.getTime() - 1000*60*60*8 +   1000 * 20);
document.cookie = 'b=200;expires='+d

因为 cookie 不能直接删除
所以我们只能把某一条 cookie 的过期时间设置成当前时间之前
那么浏览器就会自动删除 cookie

let d = new Date();
d.setTime(d.getTime() - 1000*60*60*8 - 1);    //设置在浏览器打开前一秒删除
document.cookie= "aaa=111;expires="+d;

javascript

/**
         * 获取 cookie
         * @date 2022-09-06
         * @param {cookie的name} name
         * @param {cookie的value} value
         * @param {cookie的过期时间，会话级别可以不传} expires
         * @returns {undefined}
         */
function setCookie(name,value,expires){
    let d = new Date();
    d.setTime(d.getTime() - 1000*60*60*8 + 1000*expires);
    document.cookie = `${name}=${value};expires=${d}`;
}

/**
         * 删除 cookie
         * @date 2022-09-06
         * @param {cookie的name} name
         * @returns {undefined}
         */
function romoveCookie(name){
    let d = new Date();
    d.setTime(d.getTime() - 1000*60*60*8 - 1)
    document.cookie = `${name}=0;expires=${d}`
}

/**
         * 获取 cookie
         * @date 2022-09-06
         * @param {cookie的name} name
         * @returns {获取的cookie的value}
         */
function getCookie(name){
    let cooks = document.cookie.split("; ");
    console.log(cooks);

    for(let i=0;i<cooks.length;i++){
        let cooksArr = cooks[i].split('=');
        if(cooksArr[0] == name){
            return cooksArr[1];
        }
    }
}

三、浏览器本地存储

3.1 localeStorage 本地存储

1.设置本地存储

localStorage.setItem(key,value)

注意：存储的方式使用key=>value的形式

value必须是字符串
value若是对象，则需要使用JSON.stringify(o)转化为字符串

let o = { a: 1, b: 2 };
o = JSON.stringify(o);
localStorage.setItem('ooo', o);

2.获取本地存储

value若是对象，则需要使用JSON.parse(key)转化为字符串

localStorage.getItem(key)

3.移除本地存储

localStorage.removeItem(key)

4.删除所有的本地存储

localStorage.clear()

localeStorage 永久存储在本地，只要不手动删除就一直存在
可以多个页面共享数据

3.2 SessionStorage 会话存储

1.设置会话存储

SessionStorage.setItem(key,value)

2.获取会话存储

SessionStorage.getItem(key)

3.移除会话存储

SessionStorage.removeItem(key)

4.删除所有的会话存储

SessionStorage.clear()

存储的数据是有作用域的,只能作用于当前的页面,其它页面不能使用当前页面存储的sessionStorage数据
sessionStorage关闭页面之后,数据会消失

3.3 JSON正反序列化

当我们存储对象数据类型时，需要使用JSON的方法来将数据转化成JSON形式，取出来使用需要转化为正常的数据

JSON.parse(str)：将json格式的字符串转换为js的对象或者数组
JSON.stringify(obj)：将js的对象或者数组转换成为json格式的字符串

3.4 Cookie和Storage的区别

查看H5存储或者cookie可以鼠标右键，或F12，菜单栏找到application/应用程序，即可查看

生命周期
- Cookie 的生命周期是会话级别的，默认浏览器关闭消失，但是可以设置过期时间
- localeStorage 的生命周期是永久的，设置后只要不手动删除就会一直存在，而且无法设置
- SessionStorage 的生命周期是会话级别的，页面关闭就消失，而且无法设置
存储大小
- Cookie 存储大小有限制，一般是 4 KB 左右
- localeStorage 和 SessionStorage 大概在 4M左右
是否可以共享页面
- Cookie 在同源页面可以共享数据 √
- localeStorage 在同源页面可以共享数据 √
- SessionStorage 无法共享数据 ×

通信协议、Cookie及本地存储 ​

一、通信协议 ​

TCP/IP ​

HTTP ​

HTTP 的工作流程 ​

一次完整的HTTP事务的过程 ​

HTTP和HTTPS的区别 ​

HTTP协议的关键字段解释 ​

常见的 HTTP 响应状态码 ​

常见的 HTTP 请求方式 ​

GET 请求 ​

POST 请求 ​

get和post的区别总结 ​

二、Cookie ​

2.1 COOKIE 的特点 ​

2.2 使用方式 ​

1.读取 cookie 的内容 ​

2.设置 cookie 的内容 ​

3.删除 cookie 的内容使用 ​

2.3 cookie 封装 ​

三、浏览器本地存储 ​

3.1 localeStorage 本地存储 ​

1.设置本地存储 ​

2.获取本地存储 ​

3.移除本地存储 ​

4.删除所有的本地存储 ​

3.2 SessionStorage 会话存储 ​

1.设置会话存储 ​

2.获取会话存储 ​

3.移除会话存储 ​

4.删除所有的会话存储 ​

3.3 JSON正反序列化 ​

3.4 Cookie和Storage的区别 ​