sessionstorage传用户id需确保同域名单标签页使用，存取须json序列化并加空对象兜底，读取后立即删除防刷新复用，脚本需在dom加载后执行，跨域或新开标签页应换用localstorage+iframe、postmessage或url参数。
用 sessionStorage 传用户ID，关键不是“能不能”，而是“怎么避免读不到、重复读、跨域失效”。它适合同域名下、单标签页内连续跳转的场景，比如登录页 → 首页 → 个人中心，中间不新开标签、不从书签进入、也不跨子域。
只存字符串，别直接塞对象
sessionStorage 只支持字符串值。如果用户ID是数字或带结构的对象（比如 { id: 1001, role: 'admin' }），必须先 JSON 序列化：
- 存的时候：
sessionStorage.setItem('userId', JSON.stringify({ id: 1001, role: 'admin' })) - 取的时候：
const data = JSON.parse(sessionStorage.getItem('userId') || '{}')——注意加|| '{}'，否则getItem返回null时JSON.parse(null)会直接报错
用完即删，防刷新误触发
sessionStorage 的数据在页面刷新后依然存在，但业务上往往只需要用一次。比如用户ID用于初始化页面请求，之后就不该再被重复使用（否则可能造成接口重复调用或权限错乱）：
- 目标页（如 profile.html）读取后立刻清除：
const idData = JSON.parse(sessionStorage.getItem('userId') || '{}'); sessionStorage.removeItem('userId'); - 不删的话，用户按 F5 刷新，代码再次执行，
getItem还能拿到旧值，容易出逻辑 bug
确保脚本执行时机正确
不要在 DOM 尚未加载完成时就读取 sessionStorage。常见错误是把读取逻辑写在 <script></script> 标签里，但没等页面 ready 就执行了：
- 推荐写法：
document.addEventListener('DOMContentLoaded', () => { const id = sessionStorage.getItem('userId'); /* 处理 */ }); - 或者用
window.onload，它比 DOMContentLoaded 更晚，确保所有资源（含图片、脚本）都已加载完毕
跨域或新开页？换方案
sessionStorage 不跨域、不跨标签页。如果跳转目标是 https://app.example.com，而当前页是 https://admin.example.com，或用户右键“在新标签页中打开”，那 sessionStorage 完全不可用：
- 同主域不同子域：改用
localStorage+ iframe 通信，或服务端 session - 真正跨域（如 a.com → b.com）：只能用
postMessage，且必须校验e.origin，不能只信e.data - 需要持久化或支持书签访问：URL 参数更可靠，但要避开敏感信息，且注意长度限制和编码
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
