三者区别
共九个方面
1、存储大小:cookie数据大小一般不超过4k,
sessionStorage和localStorage一般可以达到5M或更大
2、存储类型:Cookie,类型为「小型文本文件」,指某些网站为了辨别用户身份而由服务器发送储存在用户本地终端上的数据,由一个名称(Name)、一个值(Value)和其它几个用于控制 cookie有效期、安全性、使用范围的可选属性组成;localStorage本质上是对字符串的读取;其实都是存的字符串
3、有效时间:localStorage存储持久数据,浏览器关闭后数据不丢失除非主动删除数据; sessionStorage数据在当前浏览器窗口关闭后自动删除;
cookie设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
4、数据与服务器之间的交互方式,cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端; sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存
localStorage内的数据要想实现通信,需要手动将存储在 LocalStorage 中的 JWT(JSON Web Token) 或其他凭证读取出来,并附加到请求的 Authorization 头中发送给服务器发送给服务器
5、应用场景:
-
标记用户与跟踪用户行为的情况,推荐使用cookie,例如每次用户访问页面时,获取之前存储的访问次数Cookie
-
适合长期保存在本地的数据,存储不敏感、不需要频繁同步的应用数据,推荐使用
localStorage
6、安全性上:
cookie在每次请求中都会被发送,如果不使用 HTTPS并对其加密,其保存的信息很容易被窃取,导致安全风险。举个例子,在一些使用 cookie保持登录态的网站上,如果 cookie被窃取,他人很容易利用你的 cookie来假扮成你登录网站
-
通过
Secure属性表示该Cookie只能通过HTTPS协议传输,能提高安全性。
-
HttpOnly属性表示该Cookie不能通过JavaScript访问,防止跨站脚本攻击(XSS) -
SameSite属性不设置none可以防止 CSRF 攻击,即使设为none,也可以通过CSRF token(服务端生成)防止
LocalStorage 最大的安全隐患是它容易受到 XSS(跨站脚本攻击) 的影响。由于 LocalStorage 可以被 JavaScript 直接访问,如果网站存在 XSS 漏洞,攻击者可以通过恶意脚本读取存储在 LocalStorage 中的 JWT,从而窃取用户身份。
7、跨域上
localStorage受同源策略限制
cookie可以通过设置SameSite 属性选择是否跨域
-
SameSite 是一个针对Cookie的安全属性,可以限制第三方Cookie的使用。通过设置
SameSite=Strict(只能在同源请求时发送)或SameSite=Lax(大部分同源请求会发送 Cookie,但外部站点的 GET 请求不会发送 Cookie),站点可以防止Cookie在跨域请求时被发送,增加安全性并减少跨站点跟踪。设置None就是允许跨域访问
8、持久化
cookie:通过 Expires 或 Max-Age 属性设置 Cookie 的过期时间,以实现持久化。
LocalStorage 中的数据默认具有持久性
9、灵活性:
cookie在所有请求自动携带,即使是不需要身份验证的请求,比如获取公共资源的请求(图片、静态文件那些)
LocalStorage 中的 Token 不会自动附加到请求中,开发者可以手动决定在哪些请求中需要附加 Token,避免在公共资源请求中携带多余的信息,避免了带宽浪费
避免 Cookie 在不需要身份验证的请求中自动携带的方法:
设置 Cookie 的 Path 属性或使用 SameSite 属性
domain 和 path 属性可以同时设置,并且不会相互冲突。domain 控制的是在哪个子域名下发送 Cookie,而 path 控制的是该域名下哪些路径可以发送 Cookie。
// 在 secure.example.com 子域名下设置身份验证 Cookie
res.cookie('authToken', token, {
maxAge: 7 * 24 * 60 * 60 * 1000, // 7天有效期
httpOnly: true, // 防止通过 JavaScript 访问
secure: true, // 仅限 HTTPS 传输
domain: 'secure.example.com', // 仅限 secure 子域名
path: '/' // 对整个 secure 子域名下的所有路径有效
});
1991

被折叠的 条评论
为什么被折叠?



