1. Cookie
- 大小:4KB。
- 过期时间:可以设置过期时间,若未设置则在浏览器关闭时消失。
- 范围:不可跨域访问。
- 安全性:可以设置
HttpOnly
,使其不可通过 JS 访问,防止 XSS 攻击(cross-site scripting 跨站脚本攻击);可以设置Secure
,只在 https 协议上传输。 - 存储:具体存储位置取决于浏览器实现,通常是存储在磁盘上,例如 Chrome 存在 IndexDB。
- 用途:比如用户的登录状态。
2. SessionStorage
- 大小:5MB
- 过期时间:浏览器标签页关闭或窗口关闭。
- 范围:只有在当前标签页或窗口有效。
- 安全性:数据存储在浏览器中,如果浏览器被攻击或用户的计算机被感染恶意软件,这些数据可能会被泄露。
- 存储:具体存储位置取决于浏览器实现,通常是存储在内存中。
- 用途:会话的临时数据。
3. LocalStorage
- 大小:5MB。
- 过期时间:永久存储,除非手动清除。
- 范围:同源策略下,所有同源页面可访问。
- 安全性:数据存储在浏览器中,如果浏览器被攻击或用户的计算机被感染恶意软件,这些数据可能会被泄露。
- 存储:具体存储位置取决于浏览器实现,通常是存储在磁盘上。
- 用途:需要长期存储的数据
4. 常见的相关问题
4.1 如果页面中嵌套了 iframe,可以共享 web 存储的数据吗?
-
- 如果符合同源策略(协议、域名、端口号一致)则可以共享数据。
-
- 如果不符合同源策略,见 4.2。
4.2 当需要跨域访问其他网站的 localStorage 时,如何处理?
- 涉及到跨域,解决跨域有诸多方案,具体项目具体分析。例如:
- 服务器代理
- JSONP(只适用 get 请求) 或 CORS
- 使用 Web Messaging API(postMessage)推荐
- 使用 OAuth 或 API 认证
- 本地存储迁移
4.3 使用 web 存储时,怎么使数据更安全?
- 对于
localStorage
和sessionStorage
- 避免存储敏感信息(密码、令牌等)
- 使用 JS 库进行加密,确保数据在存储和传输过程中保持机密性
- 控制存储的数据量,防止过多数据暴露潜在的安全风险
- 防止跨站脚本攻击(XSS)。XSS 攻击可能导致恶意脚本访问 localStorage 和 sessionStorage 中的数据,例如使用库或工具进行 HTML 实体编码,避免执行恶意代码
- 对存储的数据进行校验和验证,以防数据被篡改或伪造
- 对于
cookie
- 防止 XSS 攻击,使用
HttpOnly
和Secure
属性 - 设置合适的过期时间
- 使用
SameSite
属性,可以设置为 Strict、Lax 或 None,Strict 和 Lax 能减少 CSRF(跨站请求伪造攻击)的风险,例如:Set-Cookie: key=value; SameSite=Strict
- 防止 XSS 攻击,使用