用 localStorage 记住界面语言：切换时调用 localStorage.setItem('uiLang', 'zh-CN') 或 'en-US'，页面加载时优先读取 localStorage.getItem('uiLang')，无值则 fallback 到 navigator.language；需加 try/catch 处理禁用场景，并标记 data-i18n 元素批量更新文本。
怎么用 localStorage 记住用户选的界面语言
直接存，别绕弯。用户点“中文”就存 localStorage.setItem('uiLang', 'zh-CN')，点“English”就存 'en-US'。页面加载时优先读 localStorage.getItem('uiLang')，有值就用它；没值再 fallback 到 navigator.language 或默认值。
常见错误是只在切换时存，但没在初始化时读 —— 结果刷新就回退到浏览器语言，用户觉得“没记住”。
- 存的时候别拼错 key，
'uiLang'比'language'更明确，避免和后端字段冲突 - 值建议用标准 BCP 47 标签（如
'zh-Hans'、'pt-BR'），别用'ch'或'eng'这类自造缩写 - 如果用
fetch加载语言包，记得把语言值传进请求头或 query，而不是硬编码
切换语言时 DOM 文本怎么批量更新
别手动改每个 innerText。提前给需要翻译的元素打标记，比如加 data-i18n="home.title" 属性，然后遍历所有带该属性的节点，用当前语言的词典对象去替换内容。
容易踩的坑：用 innerHTML 直接插带 HTML 的翻译文本时，没做转义会引发 XSS；纯文本用 textContent 更安全。
立即学习“前端免费学习笔记（深入）”；
- 词典结构建议扁平化：
{'home.title': '首页', 'nav.about': '关于'}，别嵌套太深，查起来快 - 动态生成的元素（如模态框、列表项）也要在插入 DOM 后调用一次翻译函数，否则新节点不会生效
- 如果用了 Web Components，注意
shadowRoot里的节点要单独遍历，querySelectorAll默认不进去
localStorage 被禁用或配额超限时怎么办
不是所有环境都允许写入 localStorage —— 无痕模式、Strict 浏览器策略、第三方 iframe 下可能直接抛 SecurityError 或静默失败。
必须加 try/catch，且要有降级路径。不能因为存失败就让整个语言切换逻辑瘫痪。
- 写入前先
try { localStorage.setItem('test', 'ok'); localStorage.removeItem('test'); }做可用性探测 - 失败时改用
sessionStorage（仅当前会话有效）或 URL 参数（如?lang=ja）兜底 - 不要在
localStorage里存大量翻译资源本身 —— 它只有 ~5MB 上限，且是同步阻塞 API，存大 JSON 会卡主线程
服务端渲染（SSR）页面怎么和客户端语言偏好对齐
服务端不知道 localStorage 里存了啥，所以首屏 HTML 必须靠请求头（Accept-Language）或 cookie 推断语言；等 JS 加载后，再用 localStorage 的值覆盖一次 DOM。
典型问题：服务端渲染成英文，JS 加载后又切回中文，页面闪一下 —— 用户感知明显。
- 服务端尽量读取
Cookie中的preferred_lang字段（由前端首次设置并同步），比只依赖Accept-Language更准 - 客户端 JS 初始化翻译前，先检查
document.documentElement.lang是否和服务端输出一致，不一致就延迟更新，减少视觉跳变 - 如果用 React/Vue 等框架，确保 hydration 时语言状态与服务端一致，否则 React 会警告“server/client mismatch”
真正麻烦的不是存和读，而是语言切换后那些没被标记的文本、第三方组件里的硬编码字符串、还有异步加载的富文本内容 —— 它们不会自动响应 localStorage 变化，得一个个补漏。
