17370845950

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() 还原。

• 有效期：LocalStorage 永久（直到清除）；SessionStorage 仅当前标签页生命周期
• 作用域：LocalStorage 同源下所有标签页共享；SessionStorage 每个标签页独立
• 容量限制：通常都是 5–10MB（具体取决于浏览器），远大于 Cookie 的 4KB
• 是否随 HTTP 请求发送：都不参与网络请求，纯前端存储，不影响性能

使用小提醒

• 存取前建议加 try-catch，防止因存储满或禁用导致报错
• 不要存敏感信息（如密码、完整 token），它们可被同源 JS 任意读取
• LocalStorage 修改会触发同源其他窗口的 storage 事件，可用于跨标签页通信；SessionStorage 不触发
• 判断是否可用：可尝试写入再读取，或检查 typeof localStorage !== 'undefined'