web 存储

1. Cookie

• 大小：4KB。
• 过期时间：可以设置过期时间，若未设置则在浏览器关闭时消失。
• 范围：不可跨域访问。
• 安全性：可以设置 HttpOnly，使其不可通过 JS 访问，防止 XSS 攻击（cross-site scripting 跨站脚本攻击）；可以设置 Secure，只在 https 协议上传输。
• 存储：具体存储位置取决于浏览器实现，通常是存储在磁盘上，例如 Chrome 存在 IndexDB。
• 用途：比如用户的登录状态。
  
  

2. SessionStorage

• 大小：5MB
• 过期时间：浏览器标签页关闭或窗口关闭。
• 范围：只有在当前标签页或窗口有效。
• 安全性：数据存储在浏览器中，如果浏览器被攻击或用户的计算机被感染恶意软件，这些数据可能会被泄露。
• 存储：具体存储位置取决于浏览器实现，通常是存储在内存中。
• 用途：会话的临时数据。
  
  

3. LocalStorage

• 大小：5MB。
• 过期时间：永久存储，除非手动清除。
• 范围：同源策略下，所有同源页面可访问。
• 安全性：数据存储在浏览器中，如果浏览器被攻击或用户的计算机被感染恶意软件，这些数据可能会被泄露。
• 存储：具体存储位置取决于浏览器实现，通常是存储在磁盘上。
• 用途：需要长期存储的数据
  
  

4. 常见的相关问题

4.1 如果页面中嵌套了 iframe，可以共享 web 存储的数据吗？

• 1. 如果符合同源策略（协议、域名、端口号一致）则可以共享数据。
• 2. 如果不符合同源策略，见 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