localStorage 和 sessionStorage
在前端开发中，localStorage 和 sessionStorage 都是浏览器提供的 Web Storage API，用于在客户端存储数据，但它们在生命周期和作用域上有显著区别：
核心区别总结
-
生命周期：
localStorage：数据永久存储，除非手动清除（通过代码、开发者工具或浏览器设置）。sessionStorage：数据仅在当前会话有效（关闭标签页或浏览器窗口后自动清除）。
-
作用域：
localStorage：同源（相同协议+域名+端口）的所有标签页和窗口共享。sessionStorage：仅对当前标签页有效（即使是同源的其他标签页也无法访问）。
使用场景对比
| 特性 | localStorage | sessionStorage |
|---|---|---|
| 持久性 | 适合长期保存数据（如用户偏好设置） | 适合临时数据（如表单草稿） |
| 共享性 | 多窗口共享数据 | 仅限单标签页独立使用 |
| 敏感数据 | 不推荐（易残留） | 更安全（会话结束即清除） |
代码示例
// 存储数据
localStorage.setItem('theme', 'dark'); // 长期保存
sessionStorage.setItem('formDraft', JSON.stringify(data)); // 临时保存// 读取数据
const theme = localStorage.getItem('theme');
const draft = JSON.parse(sessionStorage.getItem('formDraft'));// 清除数据
localStorage.removeItem('theme'); // 需手动清除
// sessionStorage 关闭标签页后自动清除注意事项
- 存储限制：两者通常有约 5MB 的存储上限（不同浏览器可能差异）。
- 同步操作：会阻塞主线程，大量数据操作建议用
IndexedDB。 - 数据类型：仅支持字符串，存储对象需用
JSON.stringify()转换。 - 隐私模式：部分浏览器的无痕模式下可能禁用 Web Storage。