【学习】【HTML】localStorage、sessionStorage、cookie

localStorage

localStorage 是 Web 存储（Web Storage）API 的一部分，用于在客户端浏览器中存储数据。

基本特性

1. 存储容量：通常每个域名可以存储大约 5MB 的数据（不同浏览器可能有轻微差异）。
2. 生命周期：localStorage 中的数据没有过期时间，除非用户手动清除或通过 JavaScript 删除。
3. 同源策略：localStorage 受同源策略的限制，即只有来自同一个源（协议、域名和端口都相同）的脚本才能访问同一个 localStorage 对象。
   • 同一源下不同窗口或标签页是可以访问同一个localStorage对象。
4. 数据类型：localStorage 只能存储字符串数据。如果需要存储复杂数据类型（如对象或数组），需要先将其转换为 JSON 字符串。

基本操作

1. 存储数据：使用 setItem(key, value) 方法将数据存储到 localStorage 中。

localStorage.setItem('key', 'value');

2. 读取数据：使用 getItem(key) 方法从 localStorage 中读取数据。

const value = localStorage.getItem('key');
console.log(value); // 输出: value

3. 删除数据：使用 removeItem(key) 方法从 localStorage 中删除指定的键值对。

localStorage.removeItem('key');

4. 清空所有数据：使用 clear() 方法清空 localStorage 中的所有数据。

localStorage.clear();

sessionStorage

sessionStorage 是 Web 存储的一种形式，它允许在浏览器中存储键值对。

基本特性

1. 存储容量：通常每个窗口/标签页可以存储 5MB 左右的数据，具体取决于浏览器实现。

• 每个标签页或窗口：每个浏览器窗口或标签页都有自己的 sessionStorage 实例，每个实例的存储限制通常是 5MB。
• 不同标签页独立：即使在同一个源（域名）下，不同的标签页或窗口之间的 sessionStorage 是独立的，不会共享存储空间。

2. 生命周期：数据在浏览器或标签页关闭后会被清除。除非用户手动清除或通过 JavaScript 删除。
3. 同源策略：受同源策略的限制，即只有来自同一个源（协议、域名和端口都相同）的脚本才能访问相同的 sessionStorage 对象。
4. 数据类型：只能存储字符串数据。如果需要存储复杂数据类型（如对象或数组），需要先将其转换为 JSON 字符串。

基本操作

1. 设置数据：使用 setItem 方法来添加或更新键值对。

sessionStorage.setItem('key', 'value');

2. 获取数据：使用 getItem 方法来获取指定键的值。

const value = sessionStorage.getItem('key');

3. 删除数据：使用 removeItem 方法来移除指定键的数据。

sessionStorage.removeItem('key');

4. 清空数据：使用 clear 方法来清除所有数据。

sessionStorage.clear();

cookie

cookie 是网站通过 Web 浏览器留在访问者电脑上的一小段信息。

基本特性

1. 数据格式：Cookie 是键值对形式的文本数据，格式为 name=value。
2. 大小限制：每个 Cookie 的最大大小通常为 4KB，每个域名下可以存储的 Cookie 总数通常不超过 20 个。
3. 作用域：可以通过 Domain 和 Path 参数来指定 Cookie 的作用域。
4. 生命周期：

• Session Cookie：没有设置 Expires 或 Max-Age 的 Cookie，在浏览器关闭后会被删除。
• Persistent Cookie：设置了 Expires 或 Max-Age 的 Cookie，会在指定的时间后过期。

5. 安全属性：

• Secure：表示这个 Cookie 只能通过 HTTPS 安全协议发送。
• HttpOnly：防止客户端脚本（如 JavaScript）访问 Cookie，增加安全性。
• SameSite：控制 Cookie 是否随跨站请求一起发送，以防止 CSRF 攻击。

基本操作

1. 可以通过 document.cookie 属性来读取和设置 Cookie。

// 读取所有 Cookie
console.log(document.cookie);
// 设置一个 Cookie
document.cookie = "name=value; max-age=3600; path=/";