sessionStorage 存对象需 JSON.stringify()，取时 JSON.parse() 并判空；存 HTML 要 encodeURIComponent()，取时 decodeURIComponent()；注意跨域、私密模式限制及 SSR 兼容性。
直接用 sessionStorage.setItem() 存字符串就行，但对象、HTML 片段、带特殊字符的值必须处理，否则大概率静默丢数据。
存对象前必须 JSON.stringify()
传对象进去不报错，但实际存的是 "[object Object]" —— 因为 setItem() 会隐式调用 toString()。取出来再 JSON.parse() 必然失败。
- 错误写法：
sessionStorage.setItem('user', {id: 1, name: 'Alice'}) - 正确写法：
sessionStorage.setItem('user', JSON.stringify({id: 1, name: 'Alice'})) - 读取时别忘了
JSON.parse(sessionStorage.getItem('user'))，且要先判空：if (sessionStorage.getItem('user')) { ... } - 布尔或数字值也建议统一走 JSON 流程，避免手动转类型出错（比如
'true'和true混用）
存 HTML 字符串要先 encodeURIComponent()
含 &、=、%、中文或 emoji 的 HTML 片段，不编码就存，大概率被截断或解析错乱——sessionStorage 不报错，只 quietly 丢掉后半截。
- 存的时候：
sessionStorage.setItem('draft', encodeURIComponent(element.outerHTML)) - 取的时候：
decodeURIComponent(sessionStorage.getItem('draft')) - 插入 DOM 优先用
range.createContextualFragment()，比innerHTML =更安全（不执行 script，不触发重排） - 别存整页 HTML，只存业务需要的片段（如
<div id="form-content">...），控制体积在 2MB 内更稳妥
getItem() 返回 null 的真实原因不是“没存”，而是…
sessionStorage.getItem() 返回 null，90% 不是代码写错了，而是以下几种情况之一：
立即学习“前端免费学习笔记（深入）”；
- 键名拼错，或用了空格/斜杠/控制字符（推荐只用字母、数字、下划线）
- 在私密模式下测试：Safari 无痕窗口可能完全禁用写入，
setItem()静默失败 - 跨子域名访问：比如
app.example.com存的，在api.example.com里读不到 - 值是
null或undefined：它们会被转成字符串"null"/"undefined"，不是删除操作，所以getItem()仍返回字符串
别指望 sessionStorage 自动响应变化
当前页面改了 sessionStorage，自己监听不到——storage 事件只在其他同源窗口修改时触发。Vue/React 里直接改 sessionStorage，组件不会自动更新。
- 需要视图响应，就得手动同步：改值的同时更新
useState或ref - 想跨 tab 同步？换
localStorage+storage事件，sessionStorage天然不支持 - SSR 环境（如 Next.js、Nuxt）里直接访问会报
ReferenceError: sessionStorage is not defined，得包在typeof window !== 'undefined'判断里
最容易被忽略的点：浏览器限制不是固定 5MB，而是受 UTF-16 编码膨胀影响，实际可用常低于 2MB；另外 Safari 无痕模式下，setItem() 可能彻底失效，连 try/catch 都捕获不到异常——只能靠 sessionStorage.length 是否变化来间接验证。
