【http】cookie、sessionStorage、localStorage的差异

cookie、sessionStorage、localStorage的差异

相关文章

• http状态码
• http头部信息
• http1、2、3
• http推送与websocket推送
• http预检请求
• cookie、sessionStorage、localStorage的差异

cookie、sessionStorage、localStorage的差异

---

一、差异

生命周期：

• Cookie：

  Cookie 的生命周期由设置的过期时间决定。可以设置一个过期日期，让 Cookie 在指定日期之后失效，或者不设置过期时间，让 Cookie 成为会话 Cookie，在浏览器关闭时自动删除。有过期时间，可以设置过期时间，过期后会被浏览器删除，如果不设置过期时间，默认为会话级别，即关闭浏览器时会被删除。

• sessionStorage：

  sessionStorage 存储的数据在当前会话期间有效。会话期间指的是在浏览器窗口或标签页关闭之前，数据将一直保留。当用户关闭窗口或标签页时，sessionStorage 中的数据将被清除。

• localStorage：

  localStorage 存储的数据在浏览器关闭后仍然有效。除非显式删除或过期，否则 localStorage 中的数据将一直保留。

作用域：

• Cookie：

  • 作用域范围：Cookie 的作用域由其所设置的域名和路径确定。可以通过设置Cookie的Domain和Path属性来限制Cookie的作用域。
  • 跨子域共享：Cookie 可以通过设置 Domain 属性实现跨子域共享。例如，如果将 Domain 设置为 “.example.com”，那么所有以 “example.com” 结尾的子域名都可以访问该 Cookie。
  • 同源策略：Cookie 受同源策略的限制，即只有在相同的协议、域名和端口号下才能被访问。不同源（origin）的网页无法访问彼此的 Cookie，这有助于防止跨站点攻击（XSS）和跨站请求伪造（CSRF）等安全问题。

  // 设置 Domain 和 Path 属性
  document.cookie = "name=value; Domain=.example.com; Path=/";
  
  // 或者使用服务器端设置 HTTP 响应头
  // Set-Cookie: name=value; Domain=.example.com; Path=/

• sessionStorage 和 localStorage：

  • 作用域范围：sessionStorage 和 localStorage 的作用域受同源策略的限制，只能被同一源（origin）下的页面访问。即只有在相同的协议、域名和端口号下的页面才能访问同一份数据。
  • 不同窗口和标签页之间的共享：每个窗口或标签页都有自己独立的 sessionStorage 和 localStorage 存储空间，不同窗口或标签页之间的数据不共享。这意味着在同一浏览器中打开的不同窗口或标签页之间无法直接共享数据。

  但是当新的页面是通过 window.open 或者链接的形式打开的，那么新的页面就会复制上一个页面的 localStorage和sessionStorage 到新的页面中。

大小限制：

• Cookie：每个 Cookie 的大小限制通常为 4KB 左右，每个域名下的 Cookie 总数也有限制，不同浏览器可能略有不同。
• sessionStorage 和 localStorage：通常支持的存储空间较大，一般在 5MB 左右，不同浏览器可能会有所差异。

存储方式：

• Cookie：

  以文本形式存储在浏览器的 cookie 文件中，以键值对的形式保存在 HTTP 请求头中发送给服务器。

• sessionStorage：

  以键值对的形式存储在浏览器内存中。

• localStorage：

  以键值对的形式存储在浏览器的本地文件中。

访问方式：

• Cookie：可以通过 document.cookie 属性进行读写操作。
• sessionStorage 和 localStorage：可以通过 window.sessionStorage 和 window.localStorage 属性进行读写操作。

二、如何增加 cookie 的安全性

• 使用 Secure 标志：

  设置 Secure 标志可以确保 cookie 只能通过 HTTPS 连接发送到服务器，而不会通过不安全的 HTTP 连接。这样可以防止 cookie 被窃听或篡改。

• 使用 HttpOnly 标志：

  设置 HttpOnly 标志可以防止客户端脚本通过 document.cookie 等方式访问 cookie，这样可以防止跨站点脚本攻击（XSS）。

• 设置 SameSite 标志：

  设置 SameSite 标志可以控制浏览器在发送跨站点请求时是否携带 cookie。通过设置 SameSite 标志为 Strict 或 Lax，可以防止跨站点请求伪造攻击（CSRF）。

• 限制域名范围：

  限制 cookie 的作用域范围，确保 cookie 只能在必要的域名下使用。避免将 cookie 设置为在整个顶级域名下共享，以减少跨域风险。

• 设置过期时间：

  合理设置 cookie 的过期时间，确保敏感信息不会长时间存储在客户端。对于临时会话数据，可以设置为会话 cookie，在浏览器关闭时自动删除。

• 避免存储敏感信息：

  避免将敏感信息存储在 cookie 中，尤其是在客户端存储的 cookie。敏感信息应该尽量在服务器端处理和存储，减少泄露风险。