用 localStorage 记住字体大小需“用户调完立刻存、页面一开马上用”：存带单位字符串如"16px"，读取时内联脚本在中同步设根元素字号防FOUC，每次调整后立即更新UI，加try-catch和兜底默认值确保稳定。
用 localStorage 记住网页字体大小偏好，核心是“用户调完立刻存、页面一开马上用”，重点不在存得多 fancy，而在读写时机准、DOM 同步快、异常兜得住。
怎么存：字符串优先，避免类型陷阱
用户调整字体（比如点击“增大”按钮或拖动滑块）后，把当前值转成字符串存进去：
- 推荐存带单位的字符串，如 "16px" 或 "larger"，读取后可直接赋给
style.fontSize - 若存纯数字（如 16），读取后得手动补单位：
localStorage.getItem("fontSize") + "px" - 不要存对象嵌套，除非你已统一管理所有偏好；单一设置用独立 key 更轻量、易调试，例如：
localStorage.setItem("fontSize", "18px")
怎么读：内联脚本防 FOUC，别等 DOM 加载完
样式闪动（FOUC）常因 CSS 先渲染、JS 后执行导致。解决方法是在 里加一段内联脚本，确保字体设置在 HTML 渲染前就生效：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 示例写法：
<script>const size = localStorage.getItem("fontSize") || "14px"; document.documentElement.style.fontSize = size;</script> - 这样根元素字号一上来就是用户选的，所有 rem 单位都能正确计算，页面不会先显示默认字号再跳变
- 如果用的是 class 控制（如
.font-large），也建议在这段脚本里同步加 class：document.body.classList.add("font-large")
怎么同步：改完即应用，不只存不管
保存不是终点，关键是要让界面实时响应：
立即学习“前端免费学习笔记（深入）”；
- 每次用户操作后，除了
setItem，必须立刻更新 UI：改 input 的 value、高亮对应按钮、重设document.documentElement.style.fontSize或目标容器的style.fontSize - 封装一个
applyFontSize(size)函数集中处理这些动作，避免重复逻辑 - 若支持多级缩放（如小/标准/大/超大），建议用预设值映射表，防止输入非法数字，例如：
const sizes = { small: "12px", normal: "14px", large: "16px", xlarge: "18px" }
怎么兜底：null、异常、隐私模式都要稳住
localStorage 在无痕模式、手动清空、配额满时可能返回 null 或抛错：
- 读取时用短路运算兜底：
const size = localStorage.getItem("fontSize") ?? "14px" - 写入前加
try...catch，捕获 QuotaExceededError 等异常，失败时仅降级为内存变量，不中断流程 - 检查
typeof localStorage !== 'undefined'再使用，兼容极老旧环境或禁用场景 - 若读到非预期值（如空字符串、"abc"），应 fallback 到默认值，再赋给样式，避免 Canvas 或排版崩溃
