SessionStorage 是浏览器提供的临时存储机制，适合 SPA 中页面间传参，生命周期与标签页一致，关闭即清空；需用 JSON.stringify/parse 处理对象，设唯一 key 并读取后立即 removeItem，避免重复使用或冲突。
SessionStorage 是浏览器提供的临时存储机制，适合在单页面应用（SPA）中实现页面间传参，尤其适用于路由跳转但不刷新整个页面的场景（如 Vue Router、React Router 的编程式导航）。它的生命周期与当前标签页会话一致，关闭标签页即清空，安全性与适用性比 URL 参数或全局变量更优。
SessionStorage 传参的核心逻辑
本质是“存-取”配合：在跳转前将参数序列化后存入 sessionStorage，目标页面组件挂载时读取并清理。关键点在于确保数据只被消费一次，避免重复使用或残留。
- 必须使用 JSON.stringify() 存储对象，用 JSON.parse() 读取，否则复杂类型（如对象、数组）会变成
[object Object] - 推荐为每个参数设置唯一 key（如
"pageA_to_pageB_data"），避免不同页面间 key 冲突 - 读取后立即调用 removeItem()，防止参数被其他逻辑误读或重复使用
Vue 项目中的典型用法
以 Vue Router 编程式导航为例，在源页面触发跳转前存参：
this.$sessionStorage.setItem('user_detail', JSON.stringify({ id: 123, name: '张三' }));
this.$router.push('/profile');
在目标页面（如 Profile.vue）的 mounted 或 setup 中读取：
const data = this.$sessionStorage.getItem('user_detail');
if (data) {
const user = JSON.parse(data);
this.$sessionStorage.removeItem('user_detail'); // 立即清除
this.userProfile = user;
}
注意：若使用 Composition API，可封装一个 useSessionData(key) 组合函数统一处理读取+清理逻辑。
React + React Router 实现方式
在跳转发起处（如按钮点击）：
const params = { orderId: 'ORD-789', status: 'pending' };
sessionStorage.setItem('order_context', JSON.stringify(params));
navigate('/order/detail');
在目标页面（OrderDetail.jsx）中使用 useEffect 获取：
useEffect(() => {
const raw = sessionStorage.getItem('order_context');
if (raw) {
try {
const context = JSON.parse(raw);
setOrderContext(context);
sessionStorage.removeItem('order_context'); // 防止刷新后重复读取
} catch (e) {
console.warn('无效的 session 数据', e);
}
}
}, []);
注意事项与替代建议
SessionStorage 不适合传递敏感信息（如 token、密码），它不加密且同源下所有脚本均可访问；也不适用于跨标签页通信。
- 若参数需支持浏览器前进/后退保留，考虑结合 Router 的 state 属性（如
router.push({ path: '/x', state: { ... } })），该方式更语义化且不依赖全局存储 - 参数量较大（>5MB）或需持久化时，改用 localStorage 并自行管理过期逻辑
- 服务端渲染（SSR）场景下，sessionStorage 在服务端不可用，需做兼容判断（
typeof window !== 'undefined'）
