应先用 encodeURIComponent 编码再存，取时 decodeURIComponent 解码，并用 createContextualFragment 安全插入 DOM；sessionStorage 每标签页独立、自动清理，适合暂存 HTML 片段。
sessionStorage.setItem() 存 HTML 字符串会出什么问题
直接把 innerHTML 或完整 HTML 字符串塞进 sessionStorage.setItem() 看似可行，但实际容易触发静默失败或数据截断——尤其当 HTML 含大量标签、内联样式或 Unicode 符号时。sessionStorage 本身没有报错机制，存不进去也不会抛异常，只是 quietly 丢掉超出部分。
常见错误现象：sessionStorage.getItem('html') 返回 null 或空字符串，但控制台无提示；刷新后内容消失，还以为是生命周期问题。
- 必须先用
encodeURIComponent()编码，否则含&、=、%的 HTML（比如 URL 参数、表单值）会导致解析错乱 - 避免存整个
<html>...</html>，只存业务需要的片段（如<div id="content">...），减少体积和解析负担 - 注意浏览器限制：多数浏览器上限约 5–10MB，但实际可用常低于 2MB（受 UTF-16 编码膨胀影响）
怎么安全地存、取并插入回 DOM
核心不是“能不能存 HTML”，而是“存完能不能原样还原且不破坏页面结构”。关键在编码/解码闭环 + 插入方式选择。
- 存的时候：
sessionStorage.setItem('draft', encodeURIComponent(htmlString)) - 取的时候：
decodeURIComponent(sessionStorage.getItem('draft'))，再用element.innerHTML = ...或range.createContextualFragment() - 优先用
createContextualFragment()（兼容性 OK，Chrome 8+ / Firefox 4+ / Safari 15.4+），它比innerHTML更安全，不会执行 script 标签，也不触发重排抖动 - 如果要支持老浏览器（如 IE11），改用
innerHTML，但务必确保 HTML 来源可信，否则有 XSS 风险
const frag = document.createRange().createContextualFragment(htmlStr); container.appendChild(frag);
为什么不用 localStorage 而选 sessionStorage
两者 API 完全一致，区别只在生命周期和作用域。sessionStorage 是每个标签页独立的，关掉标签就清空——这反而是暂存草稿、表单快照、临时 UI 状态的天然优势。
立即学习“前端免费学习笔记（深入）”；
-
localStorage会跨标签页共享，多个窗口编辑同一份 HTML 可能互相覆盖 -
sessionStorage不同步到其他设备或浏览器实例，隐私更可控 - 不需要手动清理：用户关闭标签页即释放，省去
window.onbeforeunload监听和清理逻辑 - 注意：iframe 中的
sessionStorage与父页隔离，跨 iframe 传 HTML 需走postMessage
容易被忽略的字符与边界情况
HTML 字符串里藏着很多“看不见的坑”，不是所有字符都能被 sessionStorage 忠实保存。
-
\u2028（行分隔符）和\u2029（段落分隔符）在某些旧版 Safari 中会导致setItem失败，建议提前用正则替换：htmlStr.replace(/[\u2028\u2029]/g, '') - 换行符
\n和制表符\t在innerHTML中会被压缩成空格，若需保留格式，得用<pre>或 CSSwhite-space: pre-wrap - 自闭合标签如
<img>在字符串中没问题，但若 HTML 片段缺失根节点（比如只有<li>A</li><li>B</li>），createContextualFragment()会自动包裹成DocumentFragment，而innerHTML则可能产生意外的父节点（如<div>）
真正麻烦的从来不是“怎么存”，而是“存进去的和拿出来的一样不一样”。多测几个含 emoji、数学符号、换行、注释的 HTML 片段，比看文档管用。
