Day13 通信协议、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请求。
前端面试题：
1、 一个页面从输入 URL 到页面加载完的过程中都发生了什么事情？
- http客户端发起请求，创建一个端口，默认是80
- 然后http服务器在端口监听客户端的发送请求
- 最后服务器向客户端返回状态和内容
- 浏览器根据接收到的内容进行解析
2、一次完整的HTTP事务是怎样的一个过程？
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
3、HTTP和HTTPS
HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL）， 这个时候，就成了我们常说的HTTPS。默认HTTP的端口号为80，HTTPS的端口号为443。
cookie的概念
Cookie(会话跟踪技术) 是在 HTTP 协议下，服务器或脚本可以维护客户工作站上信息的一种方式。Cookie 是由Web服务器保存在用户浏览器（客户端）上的小文本文件，它可以包含有关用户的信息。无论何时用户链接到服务器，Web 站点都可以访问 Cookie信息 。
- 比如：自动登录、记住用户名，记住一些和用户相关的信息等
- Cookie名称和值可以由服务器端开发自己定义。
- 如果cookie不存在，输出undefined.
cookie的特点
- 储存在用户本地终端上的数据
- 禁用Cookie后，几乎所有需要用户登陆帐号的网站都因为Cookie的禁用而导致无法 正常登陆。
- cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
- cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
- cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。
cookie的使用
- 保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。
- 跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便。
- 定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。
- 创建购物车。使用cookie来记录用户需要购买的商品，在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。
当然，上述应用仅仅是cookie能完成的部分应用。
cookie的使用及封装（自己动手封装）
添加cookie
<script>
1、添加cookie
如果cookie值没有添加过期时间，关闭浏览器cookie消失
document.cookie='username=zhangsan';
document.cookie='age=100';
给cookie添加过期时间
var d=new Date();//获取当前的系统时间
alert(d.getDate()+10);
d.setDate(377);
d.setDate(d.getDate()+1000);//当前的日期+7之后的日期。重新赋值给日期对象。
alert(d.toLocaleString());
document.cookie='password=12345;expires='+d;
自定义key和value
encodeURI/decodeURI
encodeURI:方法返回一个已编码的 URI。
如果将编码结果传递给 decodeURI，则将返回初始的字符串。
encodeURI 不对下列字符进行编码：“:”、“/”、“;”和“?”。
function setcookie(key,value,day){
var d=new Date();
d.setDate(d.getDate()+day);
document.cookie=key+'='+encodeURI(value)+';expires='+d;
}
setcookie('name','李四',7);
setcookie('grade','1710',7);
setcookie('age','1000',7);
setcookie('worder','boss',7);
setcookie('username','尼古拉斯赵四',7);
</script>
获取cookie
<script>
2.获取cookie
alert(decodeURI(document.cookie));//取出所有的cookie
name=李四; grade=1710; age=1000; worder=boss
var arr=decodeURI(document.cookie).split(';');//将cookie转换成数组
console.log(arr);//["name=李四", " grade=1710", " age=1000", " worder=boss"]
var newarr=arr[0].split('=');//name=李四
console.log(newarr);//["name", "李四"]
function getcookie(key){
var arr=decodeURI(document.cookie).split('; ');
for(var i=0;i<arr.length;i++){
var newarr=arr[i].split('=');
if(key==newarr[0]){
return newarr[1];
}
}
}
alert(getcookie('username'));
</script>
删除cookie
<script>
3.删除cookie
function delcookie(key){
setcookie(key,'',-1);
}
delcookie('worder');
delcookie('name');
delcookie('age');
delcookie('grade');
</script>
总结：
<script>
alert(document.cookie);//跨页面获取cookie,其他的浏览器是无法获取的。
1.cookie存放的是字符串，取出的也是字符串
2.将一个数组存放到cookie里面。存入没有问题。取出的是字符串
var arr=['apple','banana','orange','pear'];
toString():将对象转换成字符串。
setcookie('fruit',arr.toString(),7);
var newarr=getcookie('fruit');//不是数组。
var newarr=getcookie('fruit').split(',');
console.log(newarr);
newarr.push('hehe');
console.log(newarr);
console.log(typeof newarr);*///string
3.将一个对象存放到cookie里面。
var obj={
name:'zhangsan',
age:100,
sex:'男'
}
alert(obj);//[object object]强制将对象转换成字符串
alert(String(obj));//[object Object]
alert(JSON.stringify(obj));//JSON.stringify():将对应的对象转换成json格式的字符串
var objstr=JSON.stringify(obj);
setcookie('duixing',objstr,7);
console.log(getcookie('duixing'));
console.log(typeof getcookie('duixing'));
var obj1=getcookie('duixing');//字符串
var obj1=JSON.parse(getcookie('duixing'));//JSON.parse():将JSON格式的字符串转换成对象格式。
console====.log(obj1.name);
</script>
了解XSS攻击(cross site script:跨站脚本攻击)
XSS攻击全称跨站脚本攻击，是为了不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS，XSS是一种在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。
如何预防xss攻击：
对应用户的输入(url)要进行过滤。后端对你传入的内容一定进行过滤。
对于输出进行转义。
==过滤输入，转义输出==
数组、对象cookie的存储和访问。
应用
1．一周内免登陆。
2．商品浏览记录。
3．记录图片位置（拖拽：松开鼠标记录位置，鼠标按下之前取cookie赋值）。
4．照片墙的记录。
综合应用
1 . 购物车的操作。
一、escape/unescape
escape:escape 方法返回一个包含 charstring 内容的字符串值（Unicode 格式）。
所有空格、标点、 重音符号以及任何其他非 ASCII 字符都用 %xx 编码替换，其中 xx 等于表示该字符的十六进制数
unescape:从用 escape 方法编码的 String 对象中返回已解码的字符串
例外字符： @ * / +
二、encodeURI/decodeURI
encodeURI:方法返回一个已编码的 URI。如果将编码结果传递给 decodeURI，则将返回初始的字符串。encodeURI 不对下列字符进行编码：“:”、“/”、“;”和“?”。请使用 encodeURIComponent 对这些字符进行编码
decodeURI:从用encodeURI方法编码的String对象中返回已解码的字符串
例外字符：! @ # $ & * ( ) = : / ; ? + '
三、encodeURIComponent/decodeURIComponent
encodeURIComponent:encodeURIComponent 方法返回一个已编码的 URI。如果将编码结果传递给decodeURIComponent，则将返回初始的字符串。因为 encodeURIComponent 方法将对所有字符编码
decodeURIComponent:从用encodeURIComponent方法编码的String对象中返回已解码的字符串
例外字符：! * ( ) '
