[HTTP] 高级基础知识整理

Posted no-harm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[HTTP] 高级基础知识整理相关的知识,希望对你有一定的参考价值。

HTTP 高级基础知识

整理 HTTP 高级基础知识,包括 Cookie / Session / localStorage / sessionStorage / Cache-Control / Expires / Etag 等

cookie :wiki

Cookie(复数形态Cookies),又称为“小甜饼”。中文名称为“小型文本文件”,指某些网站为了辨别用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)
-wiki

cookie :博客

cookie 是什么及作用:相当于一个凭证,可以辨别用户身份/记录历史。

怎么得到:服务器传给客户端(Client Side)。

保存在哪里:保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie。

存在时长:

按存在时间,可分为非持久Cookie和持久Cookie。

1.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短暂的(但是后台代码可以设置 Cookie 存留时间)。

2.硬盘Cookie保存在硬盘里,有一个过期时间,除非用户手工清理或到了过期时间,硬盘Cookie不会被删除,其存在时间是长期的。

Cookie 的特点:

服务器通过 Set-Cookie 响应头设置 Cookie

浏览器得到 Cookie 之后,每次请求都要带上 Cookie

服务器读取 Cookie 就知道登录用户的信息(email)

设置 Cookie:Set-Cookie

具体流程: 在浏览器客户端(Client Side)注册网站 A -> 提交注册表单 POST 到 A 服务器 -> A 服务器在数据库创建用户 -> 创建成功 -> 回到登录页面 -> 输入登录选项提交登录表单 POST 到 A 服务器 -> 服务器确认用户存在 -> Set-Cookie (设置 Cookie)连同其他内容响应给用户 -> 浏览器得到并保存 Cookie -> 用户带着 Cookie 使用 GET 方法跳转到首页 -> 服务器读取 Cookie,获取用户信息

Cookie 的问题:用户可以随意篡改。

所以为了解决这个问题,引入了 session ↓↓↓↓↓↓↓↓↓↓↓↓↓


Session

session :wiki

在计算机科学领域来说,尤其是在网络领域,会话(session)是一种持久网络协议,在用户(或用户代理)端和服务器端之间创建关联,从而起到交换数据包的作用机制,session在网络协议(例如telnet或FTP)中是非常重要的部分。

可以把 sessionID 看成是一个唯一的凭证,因为他是一个随机数组成的,谁也不知道,自然也就不能篡改。

服务器将 SessionID(随机数)通过 Cookie 发给客户端

客户端访问服务器时,服务器读取 SessionID

服务器有一块内存(哈希表)保存了所有 session

通过 SessionID 我们可以得到对应用户的隐私信息,如 id、email

这块内存(哈希表)就是服务器上的所有 session

注意 Session 和 Cookie 的关系/区别:

Session 是基于 Cookie 来实现的,因为服务器要将 sessionID 通过 Cookie 传给用户。

Cookie 保存在客户端,Session 保存在服务端的内存里。


localStorage

html5 提供的API : localStorage

如果说 session 是服务器上的 hash,那 localStorage 就是浏览器上的 hash,是实现本地持久化存储的一种方式。

localStorage 只能存储字符串。

设置 localStorage 项:localStorage.setItem(‘myCat‘,‘Tom‘)

获取 localStorage 项:let cat = localStorage.getItem(‘myCat‘)

移除 localStorage 项:localStorage.removeItem(‘myCat‘)

移除 localStorage:localStorage.clear()

常用场景:可以记录用户的某一种状态,比如更新

<script>
    // 获取 localStorage
    let msg = localStorage.getItem(‘更新信息‘)

    // 如果更新后 用户第一次登录该网站,则显示更新信息
    if(!msg){
        localStorage.setItem(‘更新信息‘,true)
        alert(‘网站已更新,相关信息已在....‘)

        // 如果用户已在更新后登录过该网站,则不显示更新信息
    }else{

    }
<script>

localStorage 特点:

LocalStorage 跟 HTTP 无关

HTTP 不会带上 LocalStorage 的值

只有相同域名的页面才能互相读取 LocalStorage(没有同源那么严格)

每个域名 localStorage 最大存储量为 5Mb 左右(每个浏览器不一样)

常用场景:记录有没有提示过用户(没有用的信息,不能记录密码)

LocalStorage 永久有效,除非用户清理缓存

注意 localStorage 和 Cookie 的区别:

localStorage 跟 HTTP 无关,且 Cookie 传给服务器的时候不会带上 localStorage。

所能存储的容量不同,localStorage 可以存储 5MB 左右,Cookie 最多可以存储 4KB 左右。

localStorage 是永久有效的,除非用户清理缓存;Cookie 默认是在关闭浏览器后就消失,但是可通过后台代码可任意设置Cookie的过期时间。


SessionStorage

特点同 localStorage,唯一不同的是:

LocalStorage 永久有效,除非用户清理缓存; SessionStorage 关闭页面后即被清除。


Cache-Control

Cache-Control :wiki

什么是缓存:

缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。当 web 缓存发现请求的资源已经被存储,它会拦截请求,返回该资源的拷贝,而不会去源服务器重新下载。这样带来的好处有:缓解服务器端压力,提升性能(获取资源的耗时更短了)。对于网站来说,缓存是达到高性能的重要组成部分。缓存需要合理配置,因为并不是所有资源都是永久不变的:重要的是对一个资源的缓存应截止到其下一次发生改变(即不能缓存过期的资源)。

缓存的作用:

重用已获取的资源能够有效的提升网站与应用的性能。Web 缓存能够减少延迟与网络阻塞,进而减少显示某个资源所用的时间。借助 HTTP 缓存,Web 站点变得更具有响应性。

设置缓存:Cache-control

注意:一般不在首页设置缓存,因为一旦设置了缓存,就获取不到更新后的代码。

设置了长时间缓存后如何更新:

把设置了缓存的文件名更新一下,即改变文件的 url ,如 <link rel="stylesheet" href="./default.css"> 改为 <link rel="stylesheet" href="./default.css?v=2">,浏览器就会请求更新后的文件。

Expires

Expores:MDN

Expires 响应头包含日期/时间, 即在此时候之后,响应过期。
无效的日期,比如 0, 代表着过去的日期,即该资源已经过期。
如果在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令,那么 Expires 头会被忽略。

即:Expires 相当于低版本的 Cache-Control,Expires 是什么时候过期,Cache-control 是多长时间后过期。

应该优先使用 Cache-control,因为 Expires 是以本地时间为准,一旦用户的本地时间设置错误,则会引发请求失效。


Etag 与 MD5

Etag

ETag或实体标签(entity tag)是万维网协议HTTP的一部分。
ETag是HTTP协议提供的若干机制中的一种Web缓存验证机制,并且允许客户端进行缓存协商。这就使得缓存变得更加高效,而且节省带宽。如果资源的内容没有发生改变,Web服务器就不需要发送一个完整的响应。ETag也可用于乐观并发控制[1],作为一种防止资源同步更新而相互覆盖的方法。

MD5:信息摘要算法,用于确保信息传输完整一致。

具体流程:

服务器给文件设置了一个 MD5 值(理论上是唯一的),并且通过设置响应头 response.Set-Header(‘Etag‘,MD5)响应给了浏览器;

在浏览器再次请求此服务器文件时,请求头会带上此 MD5 值;

如果此文件发生了变动,他的 MD5 值也会发生改变,就会和浏览器的请求头所携带的 MD5 值不符合,服务器就会响应变动后的文件,并附带一个新的 MD5 值;

如果此文件没有发生变动,即他的 MD5 值没有发生变化,就会和浏览器的请求头所携带的 MD5 值符合,服务器接受到请求后会响应但不会返回此文件(即响应体是空的),继续沿用旧文件。

注意: Etag 和 Cache-Control 的区别

Etag:在文件没有发生变化的情况下,浏览器依然会发出请求,服务器会响应,但不会下载此文件(响应体是空)。

Cache-Control:如果文件设置了缓存时间,且文件没有发生变化,则浏览器不会发起请求。





以上是关于[HTTP] 高级基础知识整理的主要内容,如果未能解决你的问题,请参考以下文章

IOS开发-OC学习-常用功能代码片段整理

7月27日知识整合整理

整理了一份招PHP高级工程师的面试题(转)

[ 转载 ] [Java面经]干货整理, Java面试题(覆盖Java基础,Java高级,JavaEE,数据库,设计模式等)

整理JavaScript高级基础知识

VS2015 代码片段整理