cookie、localStorage、sessionStorage详解

什么是 Cookie

Cookie 是存储在客户端的一小段文本信息，以 key-value 的格式保存。它主要用于在客户端存储少量的数据，并在浏览器和服务器之间传递这些信息。

Cookie 的工作流程

1. 浏览器发送请求：当用户访问一个网站时，浏览器会向服务器发送一个 HTTP 请求。
2. 服务器响应并设置 Cookie：服务器收到请求后，可以在响应中包含一个 Set-Cookie 头部，用于将 Cookie 发送到客户端。
3. 浏览器保存 Cookie：浏览器接收到 Set-Cookie 头部后，会将 Cookie 保存在本地。
4. 浏览器携带 Cookie 发送请求：在之后的请求中，浏览器会自动在请求头部包含之前保存的 Cookie，以便服务器识别用户身份或状态。
5. 服务器处理请求：服务器收到含有 Cookie 的请求后，会根据 Cookie 的内容返回相应的数据。

如何操作 Cookie

• 设置和获取 Cookie：通过 document.cookie 可以设置和获取 Cookie 的值。设置 Cookie 时，需要指定名称、值和可选的属性（如过期时间、路径、域等）。
• 删除 Cookie：将 Cookie 的过期时间设置为一个过去的日期，即可删除该 Cookie。

Cookie 的生命周期

• 会话 Cookie：如果不设置过期时间，则表示该 Cookie 的生命周期为浏览器会话期间。一旦关闭浏览器窗口，Cookie 就消失了。
• 持久 Cookie：如果设置了过期时间，Cookie 的生命周期就是这个过期时间。过期时间设置为 0，代表立即删除该 Cookie。

Cookie 的限制

• 大小限制：各个浏览器对 Cookie 的大小都有限制，一般为 4K。
• 数量限制：对每个域名所包含的 Cookie 数也有限制，但该值各浏览器并不统一。
• 安全性：Cookie 容易被第三方脚本访问，因此不适合存储敏感信息。

什么是 localStorage

localStorage 是 HTML5 新加入的特性，用来作为本地存储使用，解决了 Cookie 存储空间不足的问题。localStorage 允许在用户的浏览器中存储大量的数据，并且这些数据不会因为页面刷新或浏览器关闭而消失。

如何操作 localStorage

• 保存数据：使用 localStorage.setItem('key', 'value') 方法保存数据。
• 读取数据：使用 localStorage.getItem('key') 方法读取数据。
• 删除数据：使用 localStorage.removeItem('key') 方法删除数据。
• 清空所有数据：虽然 localStorage 没有直接提供清空所有数据的方法，但可以通过遍历所有键并逐个删除来实现。

localStorage 的生命周期

localStorage 的生命周期为永久，除非主动删除数据，否则数据并不会因为浏览器关闭而消失。

localStorage 的优点

• 存储容量大：一般浏览器支持 5M 大小，拓宽了 Cookie 的大小限制。
• 持久性：数据存储在本地，不会因为页面刷新或浏览器关闭而消失。

localStorage 的缺点

• 浏览器兼容性：有的低版本浏览器还未支持该特性（如 IE8 以下）。
• 安全性：虽然 localStorage 提供了比 Cookie 更好的安全性（因为数据不会随每个请求发送到服务器），但仍然不适合存储敏感信息。

什么是 sessionStorage

sessionStorage 也是 HTML5 新加入的特性，用于临时保存同一窗口（或标签页）的数据。与 localStorage 不同，sessionStorage 在关闭窗口或标签页之后将会删除这些数据。

如何操作 sessionStorage

• 保存数据：使用 sessionStorage.setItem('key', 'value') 方法保存数据。
• 读取数据：使用 sessionStorage.getItem('key') 方法读取数据。
• 删除数据：使用 sessionStorage.removeItem('key') 方法删除数据。
• 清空所有数据：使用 sessionStorage.clear() 方法可以删除当前会话中的所有数据。

sessionStorage 的生命周期

sessionStorage 只保存在当前会话期间，保存在 sessionStorage 里的数据在页面会话结束时会被清除。这意味着，当用户关闭浏览器窗口或标签页时，sessionStorage 中的数据将被删除。

sessionStorage 的优点

• 临时存储：适用于需要在用户会话期间临时存储的数据。
• 独立性：不同窗口或标签页之间的 sessionStorage 是独立的，互不影响。

sessionStorage 的缺点

• 生命周期限制：数据只能在当前会话期间使用，关闭窗口或标签页后数据将被删除。
• 浏览器兼容性：同样，有的低版本浏览器还未支持该特性（如 IE8 以下）。

综上所述，Cookie、localStorage 和 sessionStorage 各有其特点和适用场景。在选择使用哪种存储方式时，需要根据具体需求进行权衡。