浅谈Cookie的工作机制及用途

一、什么是Cookie

在讲解Cookie的工作机制之前我们先来聊聊Cookie是什么。

维基百科的解释如下:

HTTP cookie ,简称cookie ,又称"网站/浏览+魔饼/魔片"等,是浏览网站时由网络服务器创建并由网页浏览器存放在用户计算机或其他设备的小文本文件。

它存在于网络传输的报文中,通常由客户端向服务器发出请求报文 后,服务端向客户端返回响应报文 ,而响应报文 中就含有Set-Cookie字段,客户端接收到该报文后会自动保存Set-Cookie字段的值到本地,这就是Cookie的值。

二、Cookie的工作机制

  • 服务器需要客户端保存的内容,放在 Set-Cookie 里返回,客户端会自动保存
  • 客户端保存的 Cookie,会在之后的所有请求 里都携带进 Cookie 里发回给服务器。(:客户端保存 Cookie 是按照服务器域名来分类的。例如 shop.com 发回的 Cookie 保存下来以后,在之后向 games.com 的请求中并不会携带。)
  • 客户端保存的 Cookie 在超时后会被删除、没有设置超时时间的 Cookie (称作 Session Cookie)在浏览器关闭后就会自动删除;另外,服务器也可以主动删除还未过期的客户端 Cookies。

三、Cookie的用途

3.1 管理登录状态、验证自动登录

我们每次将微信、QQ后台关闭后,在几天内重新打开都不用重新登录,这是为什么呢?

且看下图:

用户在首次登录的时候,会将用户名和密码从客户端传到服务器中,验证登录成功后服务器会发送响应报文(即上文第二副图的HTTP...123的文段),其中包含了Set-Cookie字段,我们上文说到的,它的值就是我们要保存在本地的Cookie值,也就是上图的session_id字段,而当下一次用户发送的报文(不含有用户名和密码)携带的Cookie中含有该session_id,且在服务器中可以找到相同的session_id,则证明用户登录有效(找不到的情况一般是因为session_id过期然后被服务器清理了,这个时候就得重新登录拿到新的session_id)。而正因为本地保存的Cookie中可以自动用来进行登录验证,就不必再次输入用户名密码登录,所以也便实现了每次关闭后再打开QQ或是微信后它们都是已登录状态。

3.2 保存用户的偏好、主题

通过Cookie可以保存用户的主题设置、偏好设置等,在下一次打开后网站或者App后就可以通过Cookie快速配置主题等。 (有点类似前面的自动登录验证)

3.3 分析用户行为

淘宝等网站是怎么做到根据你的最近浏览记录来推荐一些物品呢?

上图便可解释一部分是Cookie在帮他们作祟。

  • 当你向服务器发送一个请求的时候,服务器返回的内容中有需要第三方才能打开的内容时(如一些图片),传到客户端时会自动 调用第三方打开,而第三方返回的Set-Cookie中就会带有第三方的一些标签,如上面的client_id,接着跟其他内容保留在同一个Cookie里
  • 而下次客户端再访问那个服务器的时候就会传Cookie过去服务器,也就顺带把第三方的client_id一并传过去,而那个服务器接收到client_id时,它就知道该怎么做了(即推荐相关内容给你)。

四、参考资料

扔物线的相关课程及讲义pdf、维基百科,文中图源自扔物线的课程视频。

相关推荐
游戏开发爱好者81 小时前
Charles 抓不到包怎么办?从 HTTPS 代理排错到底层数据流补抓的完整解决方案
网络协议·http·ios·小程序·https·uni-app·iphone
超级大只老咪10 小时前
常用 HTTP 状态码汇总
网络·网络协议·http
Zabbix_China10 小时前
零配置方案:Zabbix + HTTP 代理实现内网穿透工具的自动化管理
http·自动化·zabbix
苏打水com10 小时前
浏览器与HTTP核心考点全解析(字节高频)
前端·http
古城小栈10 小时前
SSE 流式传输技术:后端 说话 前端 听着
websocket·http·信息与通信
ZeroNews内网穿透10 小时前
公网访问本地搭建开源在线流程图工具Draw.io
服务器·数据库·网络协议·安全·http·流程图·draw.io
00后程序员张12 小时前
数据流抓包实战指南,TCPUDP 流量分析、HTTPS 解密与多工具协同方案
网络协议·http·ios·小程序·https·uni-app·iphone
Lisonseekpan12 小时前
HTTP请求方法全面解析:从基础到面试实战
java·后端·网络协议·http·面试
Arva .12 小时前
谈谈 HTTP 的缓存机制,服务器如何判断缓存是否过期?
服务器·http·缓存
by__csdn12 小时前
Vue3+Axios终极封装指南
前端·javascript·vue.js·http·ajax·typescript·vue