localStorage 与 sessionStorage 区别
生命周期
localStorage:
数据是持久化的。
除非手动清空或代码删除，否则即使浏览器关闭后再次打开，数据仍然存在。
sessionStorage:
数据仅在当前浏览器的标签页或窗口会话期间有效。
一旦关闭该标签页或窗口，数据会被清除。
页面刷新不会清除数据。
作用范围 🌟🌟🌟
localStorage:
作用于 同源下的所有标签页和窗口。
共享同一个协议、域名、端口下的所有页面。
sessionStorage:
作用于 当前标签页或窗口的会话。
不同的标签页或窗口，即使是同源，也有独立的 sessionStorage 实例。
同源策略 🌟🌟🌟
相同点：
- 两者都遵循 同源策略，即只有协议、域名、端口都相同的页面，才能访问同一存储。
隔离场景：
不同子域名（如 a.example.com 和 b.example.com）。
不同协议（如 http://example.com 和 https://example.com）。
不同端口（如 https://example.com:8080 和 https://example.com）。
数据大小
两者限制：
数据大小通常为 5MB 左右（不同浏览器可能略有差异）。
不适合存储大规模数据。
适用场景
localStorage:
- 适合需要长期存储的数据，例如用户设置、偏好、访问令牌等。
sessionStorage:
- 适合短期、会话级别的数据，例如表单临时数据、步骤状态等。
总结对比表
| 特性 | localStorage | sessionStorage |
|---|---|---|
| 生命周期 | 持久存储，浏览器关闭重启后仍保留，直到手动清除或清除浏览器数据 | 限于当前会话，标签页或浏览器关闭后清除 |
| 作用范围 | 同源下的所有标签页和窗口共享 | 当前标签页或窗口独立，互不影响 |
| 同源限制 | 需相同协议、域名、端口 | 需相同协议、域名、端口 |
| 数据大小 | 5-10MB（因浏览器而异） | 5-10MB（因浏览器而异） |
| 适用场景 | 长期存储用户数据（如用户设置、主题偏好） | 会话级别的临时数据（如表单数据） |