JS本地存储：localStorage与sessionStorage区别解析

golang学习网今天将给大家带来《JS本地存储：localStorage与sessionStorage区别解析》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

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() 方法：

// 存储
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。

终于介绍完啦！小伙伴们，这篇关于《JS本地存储：localStorage与sessionStorage区别解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！