SessionStorage vs LocalStorage
SessionStorage vs LocalStorage
- 基础认知：
- 共同点：都存储在浏览器端，同源（协议+域名+端口）下共享，键值对存储。
- 核心区别：
- 生命周期：
LocalStorage永久存储（除非手动清除）；SessionStorage会话级存储（关闭标签页或浏览器即清除）。 - 作用域：
LocalStorage在同源所有标签页/窗口间共享；SessionStorage仅在当前标签页（同一浏览上下文）有效，即使同源，开两个标签页也互不干扰。
- 生命周期：
- 存储大小限制：
- 绝大多数浏览器：5MB ~ 10MB（不同浏览器略有差异，如 Chrome 约 5MB，Firefox 约 10MB）。
- 注意：这个限制是针对整个域名的总大小，而不是单个 key。
- 进阶原理（与 Cookie 对比）：
| 维度 | LocalStorage | SessionStorage | Cookie |
|---|---|---|---|
| 容量 | 5-10MB | 5-10MB | 4KB |
| 生命周期 | 永久 | 标签页关闭 | 可设置过期时间 |
| 是否随请求发送 | 否 | 否 | 是（每次请求自动携带） |
| 适用场景 | 持久化用户配置、离线缓存 | 表单临时数据、滚动位置 | 身份认证（SessionId/Token） |
实战结合（你的项目，重要！）：
（LocalStorage 场景） “在 IRMP 报告平台，我把用户自定义的表格列配置（显示哪些列、宽度排序）存进
localStorage，下次登录自动恢复，体验丝滑。” （SessionStorage 场景） “在 IAMP 点云数据标注时，用户可能在页面内切换不同隧道段，我把当前标注进度（未提交的草稿）存进sessionStorage。用户不小心刷新页面，数据依然在；但关闭页面后自动清除，不占服务器存储，保障数据隐私。” （容量/安全红线） “在做 WeLink 时，因为涉及企业敏感信息，我们禁止在localStorage存 Token 或用户身份凭证，只用HttpOnly Cookie（防止 XSS 窃取）。localStorage只用来缓存非敏感数据，比如用户头像 URL、主题色等。”