localStorage、sessionStorage 和 cookies

localStorage、sessionStorage 和 cookies 都是用于在浏览器中存储数据的方式。

localStorage

用途: 用于存储较大、较长期的数据，数据不会随浏览器关闭而消失，适合存储长期有效的信息，如用户设置、主题偏好等。

• 存储大小: 大约 5 MB左右。

• 有效期: 数据会一直保留，直到用户手动清除浏览器数据，或者通过 JavaScript 删除。

• 作用域: 同源的所有窗口和标签页共享同一个 localStorage。

• 用法:

// 设置数据
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

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

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

sessionStorage

用途: 用于存储临时数据，数据只在当前会话有效（浏览器窗口或标签页关闭后，数据就会丢失）。适合存储在页面刷新之间需要保留的信息，如表单数据、购物车状态等。

• 存储大小: 大约 5MB左右。

• 有效期: 仅在当前会话期间有效。关闭窗口或标签页后，数据被清除。

• 作用域: 仅限于同一窗口或标签页，同源的不同标签页或窗口不共享 sessionStorage。

• 用法:

// 设置数据
sessionStorage.setItem('key', 'value');

// 获取数据
const value = sessionStorage.getItem('key');

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

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

cookies

用途: 用于存储需要在客户端和服务器之间传递的小型数据。常用于会话管理、用户追踪、持久化状态等。Cookies 会随每个 HTTP 请求发送到服务器。

• 存储大小: 通常最多 4 KB。

• 有效期: 可以设置过期时间。默认情况下，浏览器关闭时会删除 session 类型的 Cookie；设置了 expires 或 max-age 的 Cookie 会在指定时间后过期。

• 作用域: 同源的所有窗口、标签页和服务器端共享。

• 用法:

// 设置 Cookie
document.cookie = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// 获取所有 Cookies
const cookies = document.cookie;

// 删除 Cookie (通过设置过期时间)
document.cookie = "username=John; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

• localStorage: 适合存储长期数据，如用户偏好设置、主题、缓存的 API 响应等。

• sessionStorage: 适合存储短期数据，如会话中的表单数据、状态等。

• cookies: 适合存储需要与服务器通信的小数据，如会话 ID、用户身份验证令牌等。

安全性

• localStorage 和 sessionStorage 都只能在客户端访问，不会自动随请求发送到服务器，因此更适合存储不敏感的数据。

• Cookies 可以与服务器共享，因此在存储敏感信息时，需要使用 Secure 和 HttpOnly 标志，并且通过 HTTPS 发送。