【前端学习】前端存储--Cookie、localStorage和sessionStorage

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 漏洞,攻击者可以借此窃取用户信息,甚至伪造请求。

相关推荐
FreeCultureBoy31 分钟前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom1 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom1 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom1 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom1 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom2 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI2 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua2 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI3 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端
咖啡教室3 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript