localStorage持久存储,关闭浏览器仍保留;sessionStorage仅当前标签页有效,关闭即清除;二者同源共享、容量5–10MB、仅支持字符串、需JSON处理对象、受同源策略限制且不宜存敏感信息。

localStorage 和 sessionStorage 都是浏览器提供的客户端存储机制,用于在用户本地保存键值对数据,但它们的生命周期、作用域和使用场景有明显区别。
localStorage:持久化存储,关浏览器也不丢
数据会一直保留在浏览器中,除非手动清除(比如调用 localStorage.removeItem() 或清空浏览器缓存),即使关闭标签页、重启浏览器甚至电脑,数据依然存在。
适用场景:记住用户偏好(如主题色、语言)、长期登录状态标识、离线缓存内容操作示例:localStorage.setItem('username', 'Alice');const name = localStorage.getItem('username');localStorage.removeItem('username');localStorage.clear();
sessionStorage:仅限当前会话,关标签即失效
数据只在当前浏览器标签页(或窗口)的会话周期内有效。刷新页面保留,但关闭该标签页后数据自动清除;新开标签页即使访问同一网址,也无法读取之前 sessionStorage 的内容。
适用场景:表单临时草稿、多步流程中的中间状态、防重复提交的令牌操作方式和 localStorage 完全一致:sessionStorage.setItem('step', '2');sessionStorage.getItem('step');
关键区别总结
生命周期:localStorage 永久(直到手动清除),sessionStorage 仅当前标签页会话共享范围:同源下所有标签页可共享 localStorage;sessionStorage 严格隔离,每个标签页独立存储容量:两者通常都支持约 5–10MB(具体取决于浏览器),远大于 Cookie 的 4KB数据类型:只支持字符串。存对象需先 JSON.stringify(),读取时用 JSON.parse()
注意事项
两者都受同源策略限制:协议、域名、端口必须完全一致才能访问敏感信息(如 token、密码)不应直接存入,建议配合 HttpOnly Cookie + 后端校验没有过期时间设置,需自行管理有效期(例如存入时间戳并读取时判断)在无痕模式下部分浏览器会禁用或清空这些存储(尤其 sessionStorage)
以上就是javascript如何实现本地存储_localStorage和sessionStorage有什么区别?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1544154.html
微信扫一扫
支付宝扫一扫