LocalStorage永久存储且同源共享,SessionStorage仅当前标签页会话有效并隔离;二者均需JSON序列化对象,容量约5–10MB,不参与HTTP请求。

JavaScript 通过 LocalStorage 和 SessionStorage 提供了两种简单的客户端数据存储方式,它们都以键值对(key-value)形式保存字符串数据,但生命周期、作用域和使用场景有本质区别。
LocalStorage:长期保存,跨窗口共享
数据持久化保存在浏览器中,除非手动清除(如调用 localStorage.clear() 或用户清空缓存),否则一直存在,即使关闭标签页、重启浏览器甚至电脑也不会丢失。
- 同一域名下所有标签页和窗口都能读写同一份数据(共享)
- 适合存用户偏好设置、主题选择、登录态标识(注意:敏感信息如 token 不建议明文存这里)
- 操作示例:
localStorage.setItem('theme', 'dark');const theme = localStorage.getItem('theme');localStorage.removeItem('theme');
SessionStorage:仅限当前会话,页面级隔离
数据只在当前浏览器标签页(或窗口)的会话期间有效。关闭该标签页后,数据自动清除;新开一个同域名标签页,SessionStorage 是完全独立的,不共享。
- 适合临时状态,比如表单草稿、多步骤流程中的中间数据、防重复提交的标记
- 刷新页面不会丢失数据(仍在同一会话内)
- 操作方式与 LocalStorage 完全一致,只是把
localStorage换成sessionStorage
关键区别对比
注意:两者都不支持直接存对象或数组,必须先用 JSON.stringify() 转为字符串,读取时再用 JSON.parse() 还原。
立即学习“Java免费学习笔记(深入)”;
- 有效期:LocalStorage 永久(直到清除);SessionStorage 仅当前标签页生命周期
- 作用域:LocalStorage 同源下所有标签页共享;SessionStorage 每个标签页独立
- 容量限制:通常都是 5–10MB(具体取决于浏览器),远大于 Cookie 的 4KB
- 是否随 HTTP 请求发送:都不参与网络请求,纯前端存储,不影响性能
使用小提醒
- 存取前建议加 try-catch,防止因存储满或禁用导致报错
- 不要存敏感信息(如密码、完整 token),它们可被同源 JS 任意读取
- LocalStorage 修改会触发同源其他窗口的
storage事件,可用于跨标签页通信;SessionStorage 不触发 - 判断是否可用:可尝试写入再读取,或检查
typeof localStorage !== 'undefined'










