Cookie 、Session、localstorage、Sessionstorage的区别

概念

Cookie & Session（会话跟踪技术）、H4的存储机制；
localstorage、Sessionstorage是Web Storage，H5的本地存储机制。是针对HTML4中 Cookie 存储机制的一个改善，由于Cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的 Web Storage 存储机制。
WebStorage两个主要目标：（1）提供 cookie 之外存储会话数据的路径。（2）提供跨会话持久化存储大量数据的机制。

Cookie

Cookie实际上是一小段的文本信息，是服务器发送到用户浏览器并保存在本地的一小块数据。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端会把Cookie保存起来。当浏览器下次向同一服务器再发起请求时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。

对比Cookie，Web Storage的优点

① 存储空间更大
cookie为4KB，而Web Storage是5MB；

② 节省网络流量
Web Storage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样每次请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；

③ 对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；
④ 快速显示
有的数据存储在Web Storage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；

⑤ 安全性
Web Storage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

⑥ WebStorage 提供比cookie更方便的数据操作的方法
setItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key

浏览器本地存储与服务器端存储的区别

数据既可以在浏览器本地存储，也可以在服务器端存储 。浏览器可以保存一些数据，需要的时候直接从本地存取，sessionStorage、localStorage 和 cookie 都是由浏览器存储在本地的数据 。服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。
1、服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端
2、服务器端也可以保存用户的临时会话数据，服务器端的 session 机制，如 jsp 的 session 对象，数据保存在服务器上，

服务器端保存所有的用户的数据，所以服务器端的开销较大；
而浏览器端保存则把不同用户需要的数据分别保存在用户各自的浏览器中，浏览器端一般只用来存储小数据

参考网址

https://blog.csdn.net/weixin_45950819/article/details/123105435