浏览器Cookies、SessionStorage 和 LocalStorage详解

目录

 Cookies

 SessionStorage

 LocalStorage

总结

---

Cookies、SessionStorage和LocalStorage是浏览器提供的三种客户端存储机制，它们在用途、特点和使用方式上有所不同。Cookies适合用于在客户端和服务器之间传递数据和跟踪用户行为，但受限于大小和安全性；SessionStorage适合于临时会话数据的存储；而LocalStorage则适合长期保存用户数据。在使用时，开发人员需要根据具体的需求和安全考虑选择合适的存储机制。下面我们将详细讲解：

 Cookies

Cookies属性

key	value类型	作用	注意事项
Name（名称）	字符串	识特定的Cookie，类似于变量名。	名称应该是唯一的，以确保不与其他Cookie冲突。
Value（值）	字符串	包含在Cookie中的数据，通常是字符串，但可以是任何有效的文本数据。	值应该是用户数据的安全表示，并且遵循Cookie的限制和浏览器的规范。
Domain（域）	字符串	指定Cookie所属的域名，控制哪些域名可以访问该Cookie。	要确保Cookie在指定的域名下可见，并且不会跨域泄露敏感信息。
Path（路径）	字符串	指定Cookie有效的路径，控制哪些路径可以访问该Cookie。	限制Cookie的访问范围，提高安全性和隐私性。
Expires/Max-Age（过期时间）	日期时间或整数	指定Cookie的过期时间，可以是一个具体的日期时间或相对于当前时间的秒数。	确保Cookie在指定时间后失效，减少数据泄露的风险。
Secure（安全标志）	布尔类型	指定Cookie是否只能通过HTTPS传输，增加数据传输的安全性。	建议对于敏感信息的Cookie设置为Secure，以防止被中间人攻击截取。
HttpOnly（仅HTTP访问）	布尔类型	指定Cookie是否限制客户端JavaScript的访问，增强安全性。	防止恶意脚本通过客户端获取Cookie信息，提高安全性。
SameSite（同站策略）	字符串	指定Cookie是否限制跨站点请求，以防止CSRF攻击。	通过限制Cookie的跨站传输，防止恶意网站利用用户身份信息进行攻击。

•  特点
  1，Cookies 是由服务器发送到浏览器并存储在本地的文本文件，用于在客户端和服务器之间传递数据
  2，每次 HTTP 请求都会发送 Cookies 到服务器
  3，可以设置过期时间，也可以设置为会话级别
  4，大小通常限制在 4KB 左右
• 用途
  1，用户身份验证：通过 Cookies 存储会话标识符实现用户登录状态的跟踪
  2，跟踪用户行为：记录用户的偏好设置、浏览历史等信息
• 缺点
  1，容量小：每个 Cookie 大小有限制
  2，安全性：Cookies 存储在客户端，可能会被恶意代码访问或窃取
  3，性能影响：每次请求都会携带 Cookies，增加了数据传输量
• 用法
  设置Cookie：

  document.cookie = "username=John Doe; expires=Thu, 28 Apr 2024 12:00:00 UTC; path=/";
  

  读取Cookie
   

  const cookieValue = document.cookie
      .split('; ')
      .find(row => row.startsWith('username='))
      .split('=')[1];
  console.log(cookieValue);
  

 SessionStorage

 

SessionStorage 属性

key	value类型	作用	注意事项
Key（键）	字符串	用于标识存储的数据。	名称应该是唯一的，以确保不与其他SessionStorage 冲突。
Value（值）	任意类型的数据	任意类型的数据，存储在 SessionStorage 中的实际数据。	通常为 5MB 左右，因此不适合存储大量数据
Scope（作用域）	字符串	仅限当前会话的浏览器窗口或标签页。当用户关闭窗口或标签页时，数据将被清除。	SessionStorage 的数据仅在同一浏览器窗口或标签页中共享，不同窗口或标签页之间的数据不共享。
Storage Limit（储存限制）	字符串	存储限制是在浏览器会话期间，每个域名的每个浏览器窗口/标签页可以存储的数据量。这个限制可能因浏览器或设备而异。	SessionStorage 的存储容量比 localStorage 小得多，
Data Type Limit（数据类型限制）	任意类型	可以存储任意类型的 JavaScript 数据，包括字符串、数字、对象等。这使得它非常灵活，适用于各种类型的数据存储需求。	无

•  特点
  1，SessionStorage 用于在单个浏览器标签页或窗口期间存储数据
  2，数据仅在当前会话期间有效，关闭标签页或浏览器后会被清除
  3，存储在客户端，不会发送到服务器端
  4，大小通常限制在 5MB 左右
• 用途
  临时数据存储：存储临时状态或数据，比如表单数据、临时会话信息等。
• 缺点
  1，安全性考虑：与 Local Storage 类似，SessionStorage 中的数据也对客户端可见，可能存在安全风险，尤其是涉及到敏感信息时需要格外注意
  2，不支持持久化存储：与 Local Storage 不同，SessionStorage 中的数据在用户关闭浏览器之后会被清除，无法实现持久化存储。这对于需要在会话之间保持状态的应用程序可能不够理想
  3，存储容量限制：虽然 SessionStorage 的容量通常比 Cookies 大，但仍然存在一定的限制。对于需要存储大量数据的应用程序，可能需要考虑其他解决方案
  4，数据共享限制：与 Local Storage 不同，SessionStorage 中的数据无法在不同标签页或窗口之间共享。这可能限制了某些多标签页或多窗口应用程序的功能
  5，会话期间数据限制：SessionStorage 中存储的数据仅在当前会话期间有效，一旦用户关闭了标签页或浏览器，数据就会被清除。这种限制对于需要长期存储数据的应用程序可能不够理想
• 用法
  设置SessionStorage

  sessionStorage.setItem('username', 'John Doe');
  

  读取SessionStorage

  const username = sessionStorage.getItem('username');
  console.log(username);
  

 LocalStorage

  

LocalStorage属性

key	value类型	作用	注意事项
Key（键）	字符串	用于标识特定的Local Storage条目，确保键的唯一性以避免与其他条目冲突。	唯一的标识符，例如 "user_data" 或 "preferences"。
Value（值）	字符串	存储在Local Storage中的数据，通常是字符串形式，但可以是任何有效的文本数据。值应该是用户数据的结构化表示，方便读取和处理	包含结构化的用户数据，例如JSON格式的对象

•  特点
  1，LocalStorage 用于在浏览器中长期存储数据，数据将永久保存在客户端
  2，与SessionStorage类似，但在页面会话结束后数据不会被清除
  3，数据永久保存在客户端，除非被显式删除或浏览器清除
  4，大小通常限制在 5MB 左右
• 用途
  临时数据存储：存储临时状态或数据，比如表单数据、临时会话信息等。
• 缺点
  1，数据安全性限制：Local Storage 中的数据对于客户端是可见的，因此敏感信息（如用户凭据）可能容易受到攻击。虽然在 HTTPS 连接下可以减轻这种风险，但仍需谨慎处理
  2，跨域访问限制：由于同源策略的限制，其他域下的页面无法直接访问本地存储中的数据，这种限制可能会对某些跨域应用程序造成困扰
  3，存储容量限制：虽然 Local Storage 的存储量通常比 Cookies 大得多，但仍然存在一定的容量限制。对于需要大量存储的应用程序，可能需要寻找其他解决方案
  4，数据存储在客户端：虽然数据存储在客户端可以提供一定程度的性能优势，但也意味着用户可以在本地对数据进行篡改。因此，不应将 Local Storage 用于安全性要求较高的数据存储
  5，不支持跨标签页数据共享：与 Session Storage 不同，Local Storage 的数据无法在不同标签页之间共享，这在某些应用场景下可能不够灵活
• 用法
  设置LocalStorage

  // 设置LocalStorage
  localStorage.setItem('username', 'John Doe');
  

  读取LocalStorage

  // 读取LocalStorage
  const username = localStorage.getItem('username');
  console.log(username);
  

总结

Cookies

• 数据存储和传输：Cookies 是一种将数据存储在客户端的机制，并在每次 HTTP 请求时自动将这些数据传输给服务器。这使得它们适合用于保持用户会话或身份验证信息等数据。
• 存储大小和结构：Cookies 的大小限制通常是 4KB。它们存储的数据是键值对的形式，可以包含简单的字符串数据。
• 作用域：Cookies 有域名和路径限制。它们只能在设置它们的域名和路径范围内访问。
• 过期时间：Cookies 可以设置过期时间，数据将在过期后自动删除。
• 安全性：可以通过设置 "Secure" 属性来确保 Cookies 仅在 HTTPS 连接中发送。

Session Storage

• 数据存储和传输：Session Storage 是一种在客户端存储数据的机制，不会自动传输给服务器。它主要用于在同一个会话内存储数据。
• 存储大小和结构：Session Storage 通常支持 5MB 或更多的存储量。它存储的数据是键值对的形式，可以包含结构化数据（如 JSON）。
• 作用域：Session Storage 的数据在同一个会话（即浏览器标签页或窗口）内是可访问的。当会话结束时，数据会自动清除。
• 过期时间：Session Storage 中的数据在会话结束时即被清除。

Local Storage

• 数据存储和传输：Local Storage 是一种在客户端存储数据的机制，不会自动传输给服务器。它主要用于长期存储数据。
• 存储大小和结构：Local Storage 通常支持 5MB 或更多的存储量。它存储的数据是键值对的形式，可以包含结构化数据（如 JSON）。
• 作用域：Local Storage 的数据在同一个域名下的所有页面都是可访问的，没有路径限制。
• 过期时间：Local Storage 中的数据是永久保存的，除非被显式清除。

总结

• Cookies 适用于与服务器进行交互，维护用户会话或身份验证信息等情况。
• Session Storage 适用于在同一个会话内存储数据，以便在多个页面间共享。
• Local Storage 适用于长期存储数据，以供将来使用。
• Cookies，Session Storage与Local Storage安全性都不佳