localStorage长期存储、跨会话共享，sessionStorage仅限当前标签页会话；二者均同源隔离、仅存字符串、API相同，但生命周期与作用域不同。
JavaScript 中的 localStorage 和 sessionStorage 都是浏览器提供的 Web Storage API，用于在客户端存储键值对数据，但它们的生命周期、作用域和使用场景有本质区别。
localStorage：长期保存，跨会话可用
数据一旦写入，会一直保留在浏览器中，除非被代码主动删除或用户手动清除缓存。它不随页面关闭、标签页关闭或浏览器重启而消失，适合存储需要持久化的内容，比如用户偏好设置、主题选择、登录态标识（注意：敏感信息如 token 不建议明文存这里）。
- 作用域为同源（协议 + 域名 + 端口），同一域名下所有页面共享同一个 localStorage
- 容量通常为 5–10 MB（不同浏览器略有差异）
- 只能存储字符串，存对象需先
JSON.stringify()，读取时用JSON.parse()
sessionStorage：仅限当前会话，页面级隔离
数据只在当前浏览器标签页（或窗口）的会话周期内有效。关闭该标签页后，数据自动清空；新开一个相同 URL 的标签页，也会拥有独立的 sessionStorage。适合临时状态管理，比如表单草稿、导航参数、多步骤流程中的中间数据。
- 即使同源，不同标签页之间互不共享 sessionStorage
- 容量与 localStorage 相当，也受浏览器限制
- 同样只支持字符串，对象需序列化/反序列化
基本操作方式完全一致
两者 API 完全相同，都提供 setItem(key, value)、getItem(key)、removeItem(key) 和 clear() 方法：
立即学习“Java免费学习笔记（深入）”；
// 存储
localStorage.setItem('theme', 'dark');
sessionStorage.setItem('formDraft', JSON.stringify({ name: 'Alice', email: 'a@b.c' }));
// 读取
const theme = localStorage.getItem('theme'); // 'dark'
const draft = JSON.parse(sessionStorage.getItem('formDraft')); // { name: 'Alice', ... }
// 删除
localStorage.removeItem('theme');
sessionStorage.clear(); // 清空当前会话所有数据
安全与使用提醒
两者都运行在前端，数据可被用户直接查看和修改，绝不能用于存储密码、token、银行卡号等敏感信息。若需临时存 token，优先考虑 httpOnly Cookie；若必须用 Storage，请配合后端校验与短期有效期控制。
另外，Storage 是同步阻塞操作，在大量数据读写时可能影响主线程性能，高频场景建议节流或改用 IndexedDB。
