localStorage与sessionStorage区别

localStorage 和 sessionStorage 都是浏览器提供的 Web Storage API，用于在客户端存储键值对数据。它们的主要区别如下：

---

1. 数据生命周期

• localStorage

  • 数据永久存储，除非手动清除（通过 JavaScript、浏览器设置或清除缓存）。
  • 关闭浏览器、重启设备后数据依然存在。

• sessionStorage

  • 数据仅在当前会话有效（会话指同一个浏览器标签页）。
  • 关闭标签页或浏览器后，数据自动清除。
  • 刷新页面不会清除数据。

---

2. 作用域

• localStorage

  • 同源共享：相同协议、域名、端口的页面间共享数据。
  • 例如：https://example.com/page1 和 https://example.com/page2 可访问同一 localStorage。

• sessionStorage

  • 标签页隔离：数据仅限当前标签页内访问。
  • 即使同源，不同标签页的 sessionStorage 也完全独立。
  • 通过 window.open() 或链接打开的同源新标签页会复制原始页面的 sessionStorage。

---

3. 存储大小

• 两者通常提供 5~10MB 的存储空间（不同浏览器可能略有差异），远超 Cookie（约 4KB）。

---

4. API 使用方式

两者共享相同的 API：

javascript

// 存数据
localStorage.setItem("key", "value"); 
sessionStorage.setItem("key", "value");

// 取数据
const data = localStorage.getItem("key"); 
const data = sessionStorage.getItem("key");

// 删数据
localStorage.removeItem("key"); 
sessionStorage.removeItem("key");

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

---

5. 适用场景

• localStorage

  • 长期保存的数据（如用户主题设置、登录 Token、缓存数据）。

• sessionStorage

  • 临时数据（如表单填写进度、单次会话的临时状态）。

---

6. 其他共同点

• 键值对均为字符串类型，存储对象需用 JSON.stringify() 转换。
• 遵循同源策略（Same Origin Policy），不同源无法访问。
• 不参与 HTTP 请求（与 Cookie 不同），无网络开销。

---

示例代码对比

javascript

// localStorage 示例（跨页面持久化）
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme")); // 在其他同源页面仍可读到 "dark"

// sessionStorage 示例（仅当前标签页有效）
sessionStorage.setItem("formProgress", "step2");
console.log(sessionStorage.getItem("formProgress")); // 刷新后仍存在
// 但新开标签页访问同一页面时，无法读取此数据

---

总结

特性	localStorage	sessionStorage
生命周期	永久存储	标签页关闭即清除
作用域	同源页面共享	仅限当前标签页
存储大小	5~10MB	5~10MB
数据共享	跨标签页/窗口共享	仅限当前标签页
典型场景	长期配置、缓存	会话级临时数据（如表单状态）