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)”,但是他们生命周期不同!一个是彻底关闭浏览器进程,另一个是关闭浏览器标签。
感谢点赞收藏 ~