Cookie VS LocalStorage VS SessionStorage VS Session
Cookie
一般用于存储用户信息，购物车记录等，跟随 HTTP 请求自动发送给服务器。
- 数据结构：字符串
key=value;key1=value1;max-age=3600;Secure;HttpOnly;sameSite=Lax; - 数据存储位置：客户端
- 数据大小：4KB左右
- 生命周期：
- 持久化 Cookie，指定过期时间（
Expires）或者有效期（Max-Age），到期后浏览器自动清除，存储介质为硬盘；
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; 复制代码- 会话型 Cookie，不指定过期时间，则默认为会话周期，
关闭浏览器进程，cookie就消失了。存储介质为内存；
- 持久化 Cookie，指定过期时间（
- 安全性：可以被截获，安全性低，
- 随着
http请求自动传递给服务器。 - 也可以说
cookie是一个请求头/响应头：- 服务器以响应头的形式将
Cookie发送给浏览器 - 浏览器收到后会自动将
Cookie保存（使用document.cookie也可以在本地操作cookie） - 浏览器再次访问服务器时，会以请求头的形式将Cookie发回
- 服务器以响应头的形式将
Local Storage
持久化本地存储，默认永久存在于客户端。不会自动发送给服务器。
- 数据结构：字符串类型键值对
- 数据存储位置：客户端
- 存储介质：硬盘
- 数据大小：5MB左右
- 生命周期：默认永久
- 访问权限：同一浏览器，同源URL使用同一存储空间
- 安全性：遵循同源策略
- 使用方法：
- 增加/修改：
localStorage.setItem() - 读取：
localStorage.getItem() - 删除：
localStorage.removeItem() - 清空：
localStorage.clear()
- 增加/修改：
Session Storage
非持久化本地存储，网页标签关闭时销毁，一般用来临时存放网页刷新时不想清除的数据。比如
- 数据结构：字符串类型键值对
- 数据存储位置：客户端
- 存储介质：内存
- 数据大小：5MB左右
- 生命周期：关闭标签页就销毁
- 访问权限：每个标签相互独立，即使是同源URL
- 安全性：遵循同源策略
- 使用方法：
- 增加/修改：
sessionStorage.setItem() - 读取：
sessionStorage.getItem() - 删除：
sessionStorage.removeItem() - 清空：
sessionStorage.clear()
- 增加/修改：
Session：
会话，服务器为每一次与浏览器的会话创建一个唯一的对象，保存会话中产生的数据，一般结合
Cookie实现，在Cookie中记录Session ID。
- 数据存储位置：
服务器 - 存储介质：内存（redis，memcache）也可以是文件，数据库等等
- 数据结构：
对象 - 数据大小：
无上限 - 生命周期：
session不活动的时候开始计算，如果session一直活动，session就总不会过期 一般设置上限为20分钟 - 安全性：保存在服务器，安全性较高
⚠️小细节
会话型 Cookie和Session Storage虽然都是“会话（Session）”，但是他们生命周期不同！一个是彻底关闭浏览器进程，另一个是关闭浏览器标签。
感谢点赞收藏 ～