localStorage 和 sessionStorage

在前端开发中，localStorage 和 sessionStorage 都是浏览器提供的 Web Storage API，用于在客户端存储数据，但它们在生命周期和作用域上有显著区别：

核心区别总结

1. ​​生命周期​​：

   • localStorage：数据永久存储，除非手动清除（通过代码、开发者工具或浏览器设置）。
   • sessionStorage：数据仅在当前会话有效（关闭标签页或浏览器窗口后自动清除）。

2. ​​作用域​​：

   • 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 关闭标签页后自动清除

---

注意事项

1. ​​存储限制​​：两者通常有约 5MB 的存储上限（不同浏览器可能差异）。
2. ​​同步操作​​：会阻塞主线程，大量数据操作建议用 IndexedDB。
3. ​​数据类型​​：仅支持字符串，存储对象需用 JSON.stringify() 转换。
4. ​​隐私模式​​：部分浏览器的无痕模式下可能禁用 Web Storage。