【学习】【HTML】localStorage、sessionStorage、cookie
localStorage
localStorage 是 Web 存储（Web Storage）API 的一部分，用于在客户端浏览器中存储数据。
基本特性
- 存储容量：通常每个域名可以存储大约 5MB 的数据（不同浏览器可能有轻微差异）。
- 生命周期：localStorage 中的数据没有过期时间，除非用户手动清除或通过 JavaScript 删除。
- 同源策略：localStorage 受同源策略的限制，即只有来自同一个源（协议、域名和端口都相同）的脚本才能访问同一个 localStorage 对象。
- 同一源下不同窗口或标签页是可以访问同一个localStorage对象。
- 数据类型：localStorage 只能存储字符串数据。如果需要存储复杂数据类型（如对象或数组），需要先将其转换为 JSON 字符串。
基本操作
- 存储数据：使用 setItem(key, value) 方法将数据存储到 localStorage 中。
localStorage.setItem('key', 'value');
- 读取数据：使用 getItem(key) 方法从 localStorage 中读取数据。
const value = localStorage.getItem('key');
console.log(value); // 输出: value
- 删除数据：使用 removeItem(key) 方法从 localStorage 中删除指定的键值对。
localStorage.removeItem('key');
- 清空所有数据：使用 clear() 方法清空 localStorage 中的所有数据。
localStorage.clear();
sessionStorage
sessionStorage 是 Web 存储的一种形式，它允许在浏览器中存储键值对。
基本特性
- 存储容量：通常每个窗口/标签页可以存储 5MB 左右的数据，具体取决于浏览器实现。
- 每个标签页或窗口：每个浏览器窗口或标签页都有自己的 sessionStorage 实例，每个实例的存储限制通常是 5MB。
- 不同标签页独立：即使在同一个源（域名）下，不同的标签页或窗口之间的 sessionStorage 是独立的，不会共享存储空间。
- 生命周期：数据在浏览器或标签页关闭后会被清除。除非用户手动清除或通过 JavaScript 删除。
- 同源策略：受同源策略的限制，即只有来自同一个源（协议、域名和端口都相同）的脚本才能访问相同的 sessionStorage 对象。
- 数据类型：只能存储字符串数据。如果需要存储复杂数据类型（如对象或数组），需要先将其转换为 JSON 字符串。
基本操作
- 设置数据：使用 setItem 方法来添加或更新键值对。
sessionStorage.setItem('key', 'value');
- 获取数据：使用 getItem 方法来获取指定键的值。
const value = sessionStorage.getItem('key');
- 删除数据：使用 removeItem 方法来移除指定键的数据。
sessionStorage.removeItem('key');
- 清空数据：使用 clear 方法来清除所有数据。
sessionStorage.clear();
cookie
cookie 是网站通过 Web 浏览器留在访问者电脑上的一小段信息。
基本特性
- 数据格式：Cookie 是键值对形式的文本数据，格式为 name=value。
- 大小限制：每个 Cookie 的最大大小通常为 4KB，每个域名下可以存储的 Cookie 总数通常不超过 20 个。
- 作用域：可以通过 Domain 和 Path 参数来指定 Cookie 的作用域。
- 生命周期：
- Session Cookie：没有设置 Expires 或 Max-Age 的 Cookie，在浏览器关闭后会被删除。
- Persistent Cookie：设置了 Expires 或 Max-Age 的 Cookie，会在指定的时间后过期。
- 安全属性：
- Secure：表示这个 Cookie 只能通过 HTTPS 安全协议发送。
- HttpOnly：防止客户端脚本（如 JavaScript）访问 Cookie，增加安全性。
- SameSite：控制 Cookie 是否随跨站请求一起发送，以防止 CSRF 攻击。
基本操作
- 可以通过 document.cookie 属性来读取和设置 Cookie。
// 读取所有 Cookie
console.log(document.cookie);
// 设置一个 Cookie
document.cookie = "name=value; max-age=3600; path=/";