Web Storage API

Web Storage API 提供了在浏览器端存储数据的功能，分为两种存储方式：localStorage 和 sessionStorage。它们各自有不同的特点和应用场景，下面是详细总结：

1. localStorage：持久化存储

• 持久性：数据会永久存储，直到显式删除。即使浏览器关闭，数据依然存在。

• 作用范围：同源（同协议、同域名、同端口）的多个页面之间都能访问。

• 存储大小：通常约 5MB，具体大小依赖于浏览器。

• API 操作：

  • 存储数据：localStorage.setItem('key', 'value')
  • 读取数据：localStorage.getItem('key')
  • 删除数据：localStorage.removeItem('key')
  • 清空所有数据：localStorage.clear()

适用场景：

• 用户偏好设置（如语言、主题、布局等）
• 存储长期的用户数据（如用户名、登录信息等）
• 避免重复请求数据，减少网络开销

示例：

// 存储数据
localStorage.setItem("username", "JohnDoe");

// 获取数据
const username = localStorage.getItem("username");
console.log(username); // 输出: 'JohnDoe'

// 删除数据
localStorage.removeItem("username");

---

2. sessionStorage：临时存储

• 持久性：数据仅在当前浏览器会话中有效，标签页关闭后数据丢失。

• 作用范围：仅限当前标签页或窗口，不同标签页或窗口无法共享。

• 存储大小：通常约 5MB，具体大小依赖于浏览器。

• API 操作：

  • 存储数据：sessionStorage.setItem('key', 'value')
  • 读取数据：sessionStorage.getItem('key')
  • 删除数据：sessionStorage.removeItem('key')
  • 清空所有数据：sessionStorage.clear()

适用场景：

• 存储会话数据（如当前表单输入、页面状态等）
• 临时会话状态，如浏览器窗口/标签页中的单次用户操作

示例：

// 存储数据
sessionStorage.setItem("sessionID", "abc123");

// 获取数据
const sessionID = sessionStorage.getItem("sessionID");
console.log(sessionID); // 输出: 'abc123'

// 删除数据
sessionStorage.removeItem("sessionID");

---

3. localStorage vs sessionStorage

特性	localStorage	sessionStorage
持久性	数据持久，直到手动删除	数据仅在当前会话中有效，标签页关闭即丢失
作用范围	同源的多个页面共享数据	仅限于当前标签页或窗口
数据生命周期	浏览器关闭后依然存在	浏览器窗口或标签页关闭后数据丢失
存储大小	大约 5MB	大约 5MB
API 操作	setItem, getItem, removeItem, clear	setItem, getItem, removeItem, clear

---

4. Web Storage 的优势：

• 比 Cookies 大：相较于 Cookies（最大 4KB），localStorage 和 sessionStorage 提供更大的存储空间（通常为 5MB）。
• 不会随每个 HTTP 请求发送：Cookies 会随着每个请求发送到服务器，而 Web Storage 仅在浏览器端使用，不会影响请求性能。
• 简单的键值对存储：通过 setItem、getItem 等 API，操作非常简单，适合存储结构化数据。

---

5. 安全性和注意事项：

• 存储敏感数据的风险：虽然 Web Storage 提供了便捷的数据存储，但由于数据存储在客户端，任何用户都可以通过浏览器开发者工具查看和修改数据。因此，不应将敏感数据（如密码、信用卡号等）存储在 Web Storage 中。
• 存储空间限制：localStorage 和 sessionStorage 都有存储空间限制，通常为 5MB，如果存储的数据超出限制，会抛出 QuotaExceededError 错误。

---

6. 进阶使用：

• JSON 存储：可以通过 JSON.stringify() 将对象存储为字符串，通过 JSON.parse() 读取并转换回对象。

  const user = { name: "Alice", age: 25 };
  localStorage.setItem("user", JSON.stringify(user));
  
  const storedUser = JSON.parse(localStorage.getItem("user"));
  console.log(storedUser.name); // 输出: 'Alice'

• 数据清理：定期清理无用的存储数据，避免占用过多空间，尤其是对于 localStorage。

  // 删除所有存储的数据
  localStorage.clear();

---

总结：

• localStorage 是用于持久化存储数据的工具，适用于存储长期需要的数据，数据不会随着页面刷新或浏览器关闭而丢失。
• sessionStorage 是用于临时存储数据的工具，适用于会话级数据，只在当前标签页或窗口内有效，浏览器关闭时数据丢失。