客户端存储机制SessionStorage、LocalStorage 以及 Cookie 详细介绍及对比

SessionStorage、LocalStorage 和 Cookie 都是浏览器提供的客户端存储机制，作为浏览器的内置对象使用。这些对象的主要目的是允许在客户端（用户的浏览器）存储和管理数据，以支持无服务器通信的应用场景。

SessionStorage 和 LocalStorage：作为 HTML5 引入的新 API，它们属于 Web Storage API，通过 JavaScript 操作，可以在客户端存储较大规模的数据。这些存储机制的作用范围仅限于浏览器（客户端），不会自动与服务器通信。

Cookie：Cookie 是较早的存储机制，既能用于客户端存储数据，也能通过 HTTP 请求自动与服务器进行交互。与 Web Storage API 不同，Cookie 是基于 HTTP 协议设计的，可以通过设置适当的属性（如 HttpOnly、Secure 等）来增强与服务器通信的安全性和控制。

Cookie

Cookie 是一种用于在客户端和服务器端之间传递数据的存储机制，通常用于会话管理、用户认证、偏好设置等。它的特点是可以长期保存。与 SessionStorage 和 LocalStorage 不同的是，Cookie是由浏览器发送给服务器的，因此可以被服务器端读取。

# 特点

 • 存储大小：每个 Cookie 大小限制在 4KB 左右。
 • 生命周期：可以通过 expires 或 max-age 属性设置过期时间，默认在会话结束时清除。
 • 作用域：可以设置作用域（domain 和 path），使得 Cookie 适用于指定的子域和路径。
 • Cookie 会自动随 HTTP 请求发送到服务器（可以通过 HttpOnly 和 Secure 属性加强安全）。

# 使用场景

 • 用户认证（如会话标识 Session ID）。
 • 跨页面、跨会话的用户偏好存储（如语言、主题设置等）。
 • 服务器和客户端之间的数据传递。

# 使用方式

 // 使用 JavaScript 操作 Cookie：
 // 设置Cookie
 document.cookie = "username=John; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";

 // 读取Cookie
 const cookies = document.cookie;

 // 删除Cookie（将expires设置为过去时间）
 document.cookie = "username=John; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

SessionStorage

SessionStorage 是一种在浏览器端存储数据的方式，它的特点是存储的数据仅属于单个浏览器选项卡和窗口，浏览器关闭或者选项卡关闭时，SessionStorage 中的数据也会被清除。

# 特点

 • 存储大小：通常为 5MB 左右。
 • 生命周期：仅在页面会话期间有效，关闭页面或标签后数据会被删除。
 • 作用域：同源（同协议、同域名、同端口）下的不同页面独立，不共享数据。

# 使用场景

 • 用于存储在当前会话中临时的数据，如表单的临时数据、用户操作状态等。
 • 不需要跨页面或跨会话保存数据。

# 使用方式

 // 存储数据
 sessionStorage.setItem('key', 'value');

 // 读取数据
 const data = sessionStorage.getItem('key');

 // 删除数据
 sessionStorage.removeItem('key');

 // 清除所有数据
 sessionStorage.clear();

# 补充注意

 对于SessionStorage可能一直存在一个误区，在Chrome浏览器89版本前，
 当前会话页面指的是当浏览器窗口没有关闭时，窗口内同域网站可以共享此数据（同源浏览器多个窗口不共享），

 当页面全部关闭或窗口关闭后，sessionStorage数据会被摧毁，
 所以你用a标签跳转还是js跳转都会共享SessionStorage。

 而在2021年3月初Chrome浏览器进行了批量更新，更新到89版本后，
 通过a标签target="_blank"跳转到新页面时SessionStorage就会丢失。
 Chrome这一更新可能会导致很多网站的SessionStorage丢失，页面可能直接就崩掉了。

LocalStorage

LocalStorage 也是浏览器端的存储方式，但与 SessionStorage 不同，它的特点是存储的数据不会被浏览器关闭或选项卡关闭所影响，关闭浏览器后，数据依然会保存。可以长期保存在用户设备中直到被清除。LocalStorage 中存储的数据可以在同一域名下的不同页面中共享。

# 特点

 • 存储大小：通常为 5MB 左右。
 • 生命周期：永久存储，直到用户或程序主动删除。
 • 作用域：同源下的所有页面共享数据。

# 使用场景

 • 用于存储长期有效的数据，如用户设置、登录状态等。
 • 可以在不同页面或下次访问时使用同一存储数据。

# 使用方式

 // 存储数据
 localStorage.setItem('key', 'value');

 // 读取数据
 const data = localStorage.getItem('key');

 // 删除数据
 localStorage.removeItem('key');

 // 清除所有数据
 localStorage.clear();

总结

总结：SessionStorage 和 LocalStorage 是现代浏览器为前端开发者提供的独立于服务器的存储方式，而 Cookie 则是传统的存储和通信机制，可以与服务器共享信息。