cookie、localStorage和sessionStorage是web开发中客户端存储的三种常用技术。现对三者的特点进行比较如下:
1.存储大小
- cookie: 每条cookie数据大小一般不超过4kB,浏览器对每个域名下的cookie总数量限制在20个左右;
- localStorage和sessionStorage：存储数据量较大，一般能存储5M甚至更高
存储周期
- localStorage 能够永久存储直到用户主动清除；
- sessionStorage在当前页面关闭或者浏览器关闭后删除，当前页面永久存储；
- 每个cookie会有有效时间，在过期之前一直有效，过期后浏览器会自动清除；
2.服务器交互
- cookie会在每次发送请求时，跟随报文携带到相应的域名，服务器端可以写cookie发送给客户端；
- localStorage内的数据要想实现通信，需要手动将存储在 LocalStorage 中的数据（例如：JWT（JSON Web Token） 或其他凭证读取出来，并附加到请求的 Authorization 头中发送给服务器） 发送给服务器
3.应用场景
- 标记用户和跟踪用户行为时，推荐使用cookie.例如用户访问页面的次数
- localStorage适合存储需长期保存在本地且不需要频繁更新的数据，例如页面静态资源
4.安全性
cookie:
每次发送请求都需要携带cookie,其信息容易被窃取. 可以通过设置cookie属性来预防一定的安全威胁。
- secure:表明cookie只能通过https协议传输
- HttpOnly：表明cookie不能通过JavaScript访问，可防止跨站脚本攻击
- SameSite : 用于控制浏览器在跨站请求时是否发送该 Cookie。该属性主要有三个值：Strict、Lax 和 None。设置为非None时可以防止跨站请求伪造攻击（CSRF）;
即使将 SameSite 属性设置为 None，依然可以通过 CSRF Token 来防止 CSRF 攻击。
CSRF Token 是由服务器生成的唯一标识符，在请求时必须包含，并且服务器会验证这个 Token
是否有效。由于攻击者无法轻易获取或伪造合法的 CSRF Token，即使跨站请求中携带了 Cookie，也不会成功进行攻击。
localStorage
localStorage 的最大安全问题是 容易受到 XSS 攻击。如果攻击者成功地在页面中注入恶意 JavaScript 代码，这段代码可以轻松读取和操纵存储在 localStorage 中的数据。因此，如果站点存在 XSS 漏洞，攻击者可以借此窃取用户信息，甚至伪造请求。