最轻量方案是用dataset属性（如data-zh、data-en）存储多语言文案，配合localStorage持久化语言选择，并统一更新所有响应式文本节点；需设min-width和white-space:nowrap防布局抖动，纯文本用textContent避免XSS。
用 dataset 存储多语言文案最轻量
不需要引入 i18n 库，纯 HTML + JS 就能搞定。核心是把中英文文案都提前写在按钮或容器的 dataset 属性里，比如：data-zh="提交" 和 data-en="Submit"。点击时读取当前语言状态，再切换 textContent 或 innerHTML。
注意：别用 title 或自定义属性如 zh-text，前者语义不符，后者需额外解析；dataset 是标准、可读性强、浏览器原生支持的方案。
常见错误：直接在 JS 里硬编码字符串（如 btn.textContent = lang === 'zh' ? '提交' : 'Submit'），导致后续增删语言或改文案要翻代码，维护成本高。
用 localStorage 记住用户上次选择的语言
用户刷新页面后语言重置，体验断层。用 localStorage 持久化当前语言标识（如 'lang'）是最简单可靠的方案。
立即学习“前端免费学习笔记（深入）”；
实操建议：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 页面加载时先读
localStorage.getItem('lang')，没值则 fallback 到navigator.language或默认'zh' - 按钮点击后立即写入：
localStorage.setItem('lang', nextLang) - 别用
cookie—— 多余、有大小限制、还要处理路径和过期 - 别监听
languagechange事件 —— 它只在系统语言变更且页面未关闭时触发，不可靠
避免用 innerHTML 引发 XSS 风险
如果文案含简单格式（如加粗“重要”），用 innerHTML 看似方便，但一旦文案来自不可信来源（比如 CMS 后台输入），就可能执行脚本。
安全做法：
- 纯文本切换一律用
textContent - 真需要富文本，先用
DOMPurify.sanitize()过滤，再设innerHTML（需额外引入库） - 更稳妥的是拆分 DOM 结构：把可变文字包在
<span class="i18n-text"></span>里，只替换该节点内容
示例：<button><span class="i18n-text" data-zh="删除" data-en="Delete"></span></button>，JS 只操作这个 span 的 textContent。
中英文切换要考虑按钮宽度突变
“提交”是两个字，“Submit”是七个字符，等宽字体下宽度差一倍以上。CSS 不处理会导致布局抖动、按钮跳动、甚至换行。
关键控制点：
- 给按钮设固定
min-width（如min-width: 80px），确保英文不挤 - 用
white-space: nowrap防止中文被折成两行 - 慎用
width: fit-content—— 切换瞬间会重排，视觉卡顿 - 如果按钮在 flex 容器中，加
flex-shrink: 0避免被压缩
这问题在移动端尤其明显——小屏幕下宽度余量少，一个字符差异就能让按钮撑出父容器。
实际最易被忽略的是语言状态同步范围：按钮只是表层，页面里所有可切换文案（标题、提示、占位符、错误信息）都得响应同一份语言状态。单独改按钮而漏掉其他节点，用户会觉得“部分翻译了，又没完全翻译”，比全中文还让人困惑。
