前端缓存跟用户交互

今天接触了一点前端缓存，下面是我收集整理的缓存，还有输入网址按下回车到页面显示都发生了什么事情

后端负责提供数据和数据交互

cookie：不怕被刷新，（Expires为过期时间浏览器有默认清除的功能）

前端用来存储内容的区域；后端可以操作前端的cookie，后端可以直接种植cookie到前端，cookie大小有限制，5k左右

获取cookie

  function getcookie(key) {

    // 可以通过document.cookie获取大部分cookie

    //  /BAIDUID=([^; ]+)/  /PSTM=([^; ]+)/

    let str = document.cookie;

    let reg = new RegExp(`${key}=([^; ]+)`);

    let res = str.match(reg)

    return res ? res[1] : null;

  }

/*key：设置的属性名

**value：对应的属性值

**date：对应的过期日期

*/

设置cookie

function setCookie(key, value, data){

    if(date){

        document.cookie=`${key}=${value}; expires=${new Date(date)}`;

    }else{

        document.cookie=`${key}=${value}`;

    }

}

删除cookie

function setCookie(key, value, data){

        document.cookie=`${key}=null; expires=${new Date(date)}`;

}

在h5之后，新增了localStorage和sessionStorage这两个存储空间：大概在5兆左右，只能前端操作，不会随着请求发送给后端

    localStorage存储的内容，若不主动清除，那么永远存在

    localStorage.getItem（属性名）是用来获取对应的localStorage属性；

    localStorage.setItem('属性名','属性值'); //用来设置localStorage属性值，属性值必须是字符串，若不是，则默认调用toString转成字符串；

    一般会使用JSON.stringify(属性值)处理引用数据，此方法获取到的数据也是JSON格式，需要再用JSON.parse处理

    localStorage.removeItem(属性名)：删除对应的属性

    localStorage.clear()：删除对应的属性

    sessionStorage的api等同于localStorage; 

    区别：localStorage永远不会清楚，

              sessionStorage会在浏览器关闭的时候自动清除

    cookie对应浏览器，session对应服务器

输入一个网址按下回车到页面显示都发生了那些事？

DNS域名解析系统：domain name system

DNS解析过程：先在本机的缓存区去查域名对应的IP，若本机缓存没有找到，那么就到本区域的DNS服务器查找，本区域没有就往上查找，

    会在每一层做一个缓存；有利于本区域的访问；

    DNS就是为了找到域名对应的IP地址，然后让浏览器可以找到对应的服务器

    缓存是对静态资源的一个缓存

在地址栏输入网址之后，敲回车，都经历那些过程？

1、通过域名找到对应的IP地址

2、根据 对应的IP地址，找到对应的服务器，从服务器获取对应的资源，返回的基本都是Html代码

3、解析html，根据DOM结构渲染出一个DOM节点树；同时进行css样式树的渲染；合并样式树和节点树，形成render树；渲染render树

http事务，http请求：指一次完整的http请求（请求+响应）

URL统一资源路径

URN统一资源名称

URI统一资源标识符（URL+URN）

https 协议：ftp向服务器文件上传的一个协议

        https是在http的基础上多了一个SSL安全套阶层

域名后边是一个端口号：https默认端口号是443，ftp默认21；

        /s是路径部分

        ?wd=zhuf：这一部分属于search部分，一些参数，search修改时，会造成页面的刷新

        #qqq：属于HASH部分（目前主要应用在路由控制），HASH更改的时候不会有页面更新

location.href：获取当前地址

location.search：获取？后面的参数部分（search部分）

location.hash：获取的是#部分（HASH部分）

可以通过window.onhashchange=function(){}这个事件监听hash改变

window.onhashchange=function(){

    console.log(location.hash);

}

TCP的三次握手和四次挥手：

前端向后端打招呼 第一次握手

后端向前端响应

前端发送完自己的要求之后，会通知后端，我说完了：后端会断开 前端输入：（后端变成聋子）第一次挥手（半开状态）

后端会告诉前端，我知道了，前端就不能在给后端传数据了 第二次挥手

当后端把数据传输完之后，会再次通知前端，要关闭通道了，第三次挥手

前端会给后端一个响应，断开连接，第四次挥手

四次挥手之后，通道断开