内容摘要：Cookie、Session、Local Storage和Session Storage是我们开发中经常可以听到的名词，那么它们究竟是什么，有什么作用呢？下面我们来梳理它们的含义与用途。1、Cooki

  Cookie
、Session 、Local Storage和Session Storage是我们开发中经常可以听到的名词，那么它们究竟是什么，有什么作用呢 ？下面我们来梳理它们的含义与用途 。

1 、Cookie

    HTTP是一种无状态协议
，但是在实际Web应用中需要“保持状态” ，此时就诞生了Cookie，如下图所示的的建站模板Cookie原理图：

图片

    Cookie是服务端产生的内容发送到浏览器并由浏览器保存到本地 ，然后每次浏览器向同一服务器发送请求时都会将Cookie发送给服务器，在浏览器中的Cookie的如下图所示：

Cookie的参数含义如下所示：

Cookie的参数

含义

user=Alice

存储的键值对

Expires

过期时间(如果未设置，则随会话结束)

Http0nly

仅能通过HTTP访问，JavaScript无法读取
，防止 XSS攻击

Secure

仅在 HTTPS传输，防止被窃听

ameSite=Strict

防止跨站请求伪造(CSRF)攻击

    由于Cookie是可以在浏览器和服务器之间来回传递的，免费模板所以Cookie可以用来记录用户信息(如用户名 、购物车) 、保存登录状态(如"记住我”功能)、实现跨页面、跨网站跟踪用户行为(如广告追踪)等等。

    Cookie也存在着自身的缺点 ，每次请求服务端都会携带Cookie数据，增加网络的开销；在HTTP中明文传输，容易被篡改 ，不够安全；Cookie存储容量小（一般为4KB ，并且很多浏览器都限制一个站点最多保存20个Cookie）。

2、Session

    Session由服务端生成 ，它代表服务器与浏览器的模板下载一次会话过程 ，这个过程是连续的，也可以时断时续的 ，Session对象用来存储特定用户会话所需的信息 。如下图所示：

图片

    当用户访问服务器的时候 ，服务器创建Session并生成SessionId ，SessionId存储在Cookie中，然后返回给客户端
，每当客户端请求服务器的时候都会携带SessionId ，服务器通过SessionId查找对应Session数据。服务器租用    

    Session也是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上，这就是Session 。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了 。

    Session具有较高的安全性、云计算无数据大小的限制，所以常用在存储敏感信息(如用户登录状态 、权限)  、维护用户会话（如在线聊天
、购物车）等场景。

    同时Session也有自身的缺陷，如占用服务器资源 、扩展性差(分布式集群)、不支持跨域（仅在当前的域名下有效）。

3、Local Storage

    为了解决Cookie存储数据容量小、浪费流量的问题 ，亿华云于是在HTML5中引入了Local Storage 。Local Storage是Chromium浏览器中用于存储用户数据的一个重要机制 ，它允许Web应用程序在用户的浏览器中存储数据 ，以便在用户重新访问网站时能够快速加载和使用这些数据 。如下是浏览器中的Local Storage

图片

    Local Storage存储空间一般为5M，数据存储在用户的本地计算机上，并且不会随着浏览器会话的结束而删除
。Local Storage允许在浏览器中长期存储键值对数据 ，并且不会随着HTTP请求发送到服务器，并且其操作方便 、API友好，能通过JavaScript直接访问。

    Local Storage受同源策略的限制
，一个网站只能访问它自己域下的Local Storage，而不能访问其他域名下的数据
。

4
、Session Storage

    Session Storage是HTML5 引入的一种用于存储会话数据的机制，它也是Web Storage API的一部分  ，用于在浏览器会话期间存储数据 ，数据存储在同一窗口或标签页内，关闭窗口或标签页后数据会被清除 。

    每个域名下的Session Storage存储空间通常为5MB左右，Session Storage可以让用户把一些数据放在键值对中 ，这些数据通常是用户在网站上做一些事情的时候需要的（如填写表格） 。当用户关掉这个网页的时候，会话存储里的数据就会被清除。

总结：

（1）Cookie
、Local Storage、Session Storage都保存在浏览器端；Session保存在服务器端。

（2）浏览器每次请求都会携带Cookie到服务器端 ，并且Cookie只能存储4KB大小的数据量，Cookie过期时间需要自行手动设置
，Cookie的适用于在客户端和服务器之间长期存储共享数据。

（3）Local Storage只保存在本地 ，不会与服务器之间发生交互 ，它是永久保存
，并且数据量大小为5MB，适用于无需与服务器交互并且长期在客户端保存的场景。

（4）Session Storage不会与服务器之间发生交互，存储数据量大小为5MB，关闭浏览器后数据就清除。适用于在客户端的会话期间暂存数据的场景
。

（5）Session保存在服务端 ，常用于用户认证（存储用户的登录状态 ，判断用户是否已经登录）、购物车功能（存储用户在购物车中的商品信息）、记录用户偏好设置（存储用户的个性化设置，如语言
、时区等）
、保存游戏状态（在游戏中存储用户的进度和状态）等场景
，但是使用 Session时需要考虑安全性问题（如XSS攻击 、CSRF攻击） ，确保用户数据的安全。