【Web前端】网络协议与cookie

TCP协议
UDP协议
认识cookie
封装设置cookie和获取的方法

一、TCP、UDP协议

• 通信协议是什么？
  • 数据在网络上进行传输的规则。
  • 最常见的协议就是TCP和UDP协议
  • http协议就是TCP实现的。

TCP协议概念

TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议。

1. 账目密码
2. PC端网络

【注】如果需要传输，就先建立链接，开始传输数据，当数据传输结束，就直接断开链接。如果再要进行传输，重新建立链接。

• 好处：安全，准确性高，面向链接
• 坏处：TCP协议比较耗费时间，耗费资源。

1、TCP协议三次握手建立连接

2、TCP协议四次挥手断开连接

UDP概念

• UDP 是User Datagram Protocol的简称， 参考模型中一种无连接的传输层协议，提供面向事务的简单不可靠信息传送服务。

1. 不连接，直接传
2. 不安全，容易丢。

及时性要求非常高，数据完整度要求不高：

• 及时的语音视频聊天软件。

二、HTTP（无状态的协议）

• HTTP：基于TCP协议的一种高级协议, 用于客户端和服务器直接的通信。

这种通信最大的问题在哪？
问题就在于每次收到返回的页面，连接都断开了。
这种通讯的问题就在于， 你挂了电话， 我还怎么通讯？

比如你刚刚登陆过的账号密码， 如果你再想要登陆的话， 还要输入一遍。。。 举个简单的例子， 你逛淘宝时候每看一个商品都要重新登陆一下。。。那酸爽；

三、cookie概念（会话跟踪技术）

• COOKIE：会话跟踪技术

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

• COOKIE是第一次跟服务器连接后，服务器发给你的身份牌，记录跟你有关的信息 以后只要再跟服务器通信，必须带着这个身份牌。这样一来，关于你是谁？ 有没有登陆过？ 购物车里有什么信息？ 服务器当然就很容易知道了。

四、cookie的组成

• cookie 由名/值对形式的文本组成：name=value。完整格式为：
  name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]，
  中括号是可选，name=value 是必选。

• 设置cookie
  document.cookie = 符合cookie格式的字符串。

• 读取cookie
  alert(document.cookie); 直接读取

• 编码与解码
  为了保证在存储cookie和读取cookie的过程中，防止中文乱码，
  一般情况下，将中文编码存储，读取时再解码。

	document.cookie=‘user=‘ +encodeURIComponent(‘LIN'); //编码写入  
	alert(decodeURIComponent(document.cookie)); //解码读取

• 浏览器上查看cookie
  • 查看自己设置的cookie
    

五、cookie中可选属性详解

5.1.失效时间 — expires

expires=date

• 失效时间，如果没有声明，则为浏览器关闭后即失效。
• 声明了失效时间， 那么时间到期后方能失效。

var date=newDate(); //创建一个
date.setDate(date.getDate() +7);
document.cookie=“user= “+ encodeURIComponent('LIN')+";expires=" +date;

• PS
• 可以通过 Firefox 浏览器查看和验证失效时间。
• 如果要提前删除 cookie 也非常简单， 只要重新创建 cookie 把时间设置当前时间之前即可：date.getDate() -1 或 newDate(0)。

5.2.path限制访问路径

path=path 限制访问路径，当设置了路径，那么只有设置的那个路径文件才可以访问 cookie。

 var path='/E:/%E5%A4%87%E8%AF%BE%E7%AC%94%E8%AE%B0/JS1/29/demo';
document.cookie=“user= “+ encodeURIComponent('LIN')+ ";path="+path;

• PS：为了操作方便，我直接把路径复制下来，并且增加了一个目录以强调效果。

5.3domain限制

domain=domain 访问域名，用于限制只有设置的域名才可以访问，那么没有设置，会 默认限制为创建 cookie 的域名。

var domain ='baidu.com';
document.cookie="user= "+ encodeURIComponent('LIN')+ ";domain="+domain;

• PS：如果定义了 baidu.com ，那么在这个域名下的任何网页都可访问.必须访问域名和设置cookie的域名一致，否则cookie设置失败。

5.4secure安全设置

• secure 安全设置，指明必须通过安全的通信通道来传输(HTTPS)才能获取 cookie。

document.cookie="user= "+ encodeURIComponent('LIN')+ ";secure";

PS：https 安全通信链接需要单独配置。

六、封装
JavaScript 设置、读取和删除并不是特别的直观方便，我们可以封装成函数来方便调用。

七、总结和拓展

• 网络分层 五层

1. 物理层（网线、光纤、WIFI）
2. 数据链路层（二进制数据）
3. 网络层（IP）
4. 传输层（TCP、UDP）
5. 应用层（http）

• TCP
• UDP
• cookie 会话跟踪技术
  name=value;expires=时间;path=路径;domain=域名;secure;
• http 和 https
• 删除cookie，设置时间过期
• indexOf substring split