sessionStorage 和 localStorage 的关键区别在于生命周期和作用域：sessionStorage 仅在当前浏览器标签页会话期间有效，关闭标签即清除；localStorage 持久保存，除非手动清除。两者均以字符串键值对存储，容量约5–10MB，同源访问，不自动发送至服务器。
sessionStorage 和 localStorage 的关键区别在哪
sessionStorage 的生命周期绑定到浏览器标签页（或窗口）的会话周期：页面关闭（包括刷新、跳转、关闭标签）后，只要不是主动调用 clear() 或 removeItem()，数据在当前标签页内始终存在；而 localStorage 会持久保留，除非手动清除或用户清空浏览器数据。注意：新开一个相同 URL 的标签页，sessionStorage 是完全隔离的——这常被误认为“没存进去”，其实是预期行为。
常见错误现象：sessionStorage.setItem('user', 'alice') 后刷新页面取不到值？检查是否启用了无痕模式且禁用了 sessionStorage（极少数企业策略），或是否在 iframe 中跨域访问（会直接抛 SecurityError）。
怎么安全地写入和读取 session 数据
写入前建议先做类型校验和字符串化处理，因为 sessionStorage 只接受字符串值；读取后需主动 JSON.parse()（如果存的是对象）。不要依赖未定义行为，比如直接存 undefined 或 function。
实操建议：
Browser Session Manager
下载
使用 Playwright 为 jimeng.jianying.com 管理浏览器会话，导入 cookies/localStorage 以自动化视频生成工作流，支持图片上传等功能
- 存对象时统一用
JSON.stringify()，避免TypeError: Converting circular structure to JSON - 读取时加
try...catch，防止后端返回格式异常或存储损坏导致解析失败 - 使用前可先检查
if (typeof sessionStorage !== 'undefined')，兼容旧版 IE 或禁用 JS 的环境
// 安全写入
const saveUser = (user) => {
try {
sessionStorage.setItem('currentUser', JSON.stringify(user));
} catch (e) {
console.warn('Failed to save to sessionStorage:', e);
}
};
// 安全读取
const loadUser = () => {
try {
const raw = sessionStorage.getItem('currentUser');
return raw ? JSON.parse(raw) : null;
} catch (e) {
console.warn('Failed to parse sessionStorage data:', e);
return null;
}
};
哪些场景适合用 sessionStorage 而不是 URL 参数或内存变量
适合中短期、跨路由但不跨标签页的状态传递：比如表单草稿、筛选条件暂存、多步流程的中间状态。它比内存变量（如 React 组件 state）更能抵抗页面刷新；又比 URL 参数更干净（不暴露敏感信息、不触发 history push）、比 localStorage 更符合“仅本次会话”的语义。
使用场景举例：
- 用户在「订单填写页」输入了收货地址，跳转到「支付页」时仍需显示——用
sessionStorage比反复传参或全局 store 更轻量 - 搜索页选了分类和价格区间，点击某个商品进入详情页再返回，希望保留筛选态——
sessionStorage自动存活，无需监听 popstate - 避免重复提交：提交前存
sessionStorage.setItem('submitting', 'true')，成功后清除，页面刷新即失效，天然防重
容易被忽略的边界问题
sessionStorage 不是万能临时仓。最大容量通常为 5–10MB（各浏览器不同），但实际建议单 key 控制在 1MB 内；超出会静默失败（setItem 抛 QuotaExceededError），且不会自动清理旧数据。另外，Safari 在隐私模式下会拒绝写入 sessionStorage（返回空字符串或抛错），必须兜底。
关键提醒：
- 不要存敏感凭证（如 token），虽然它比 localStorage “短命”，但仍可能被 XSS 直接读取
- 服务端永远不应信任来自
sessionStorage的任何数据，它纯属前端便利机制 - 测试时别只在 Chrome 里点刷新——务必在 Firefox、Safari、Edge 下验证标签页隔离逻辑是否符合预期
