LocalStorage中仅存语言代码（如“i18n-lang”:“zh-CN”），切换时先更新界面再同步写入，初始化阶段尽早读取并设置html lang属性，登出时按需清理，兼容性处理需try/catch包裹。
在HTML5中用LocalStorage保存i18n多语言配置，核心是把当前语言标识（如zh-CN、en-US）存为字符串键值对，切换时读取并触发语言更新逻辑，不涉及翻译内容本身存储。
存什么：只存语言代码，别存整套翻译资源
LocalStorage适合存轻量、持久、用户级的偏好设置。多语言切换只需记住用户选了哪一种语言，而不是把所有messages.zh.json内容塞进去——那会迅速突破5MB限制，且每次加载都冗余。
- 推荐键名如
i18n-lang，值为"zh-CN"或"ja" - 避免存对象（如
{ lang: "en", timestamp: 171... }），除非你明确需要扩展字段；纯字符串更安全、兼容性好 - 首次访问无存储时，可 fallback 到
navigator.language或页面html[lang]属性
怎么存：切换时同步写入，兼顾用户体验
语言切换按钮点击后，先更新界面（避免白屏/错位），再写入LocalStorage，防止异步延迟导致刷新回退。
- 示例操作：document.documentElement.lang = 'en'; → 更新DOM语言属性
- 立即执行：localStorage.setItem('i18n-lang', 'en');
- 如果用i18n库（如i18next、vue-i18n），调用
changeLanguage('en')后再存，确保内部状态一致
怎么读：初始化阶段尽早获取，避免闪动
页面加载早期（如<script></script>内联脚本或DOMContentLoaded前）就读取LocalStorage，比等框架挂载更可靠。
- 不要等到Vue组件
mounted或ReactuseEffect才读——此时DOM可能已按默认语言渲染过一次 - 建议在
里放一段小脚本：const savedLang = localStorage.getItem('i18n-lang') || navigator.language; - 用该值设置
和初始化i18n实例，从源头控制语言
注意清理与兼容：用户登出或重置时要删，老浏览器要兜底
LocalStorage是域级持久存储，用户换语言后不清理，下次登录仍沿用旧值——这通常合理；但若账号体系要求语言绑定用户而非设备，登出时应removeItem('i18n-lang')。
- IE9+支持LocalStorage，但部分隐私模式（如Safari无痕）会直接抛异常，需
try/catch包裹读写操作 - 可封装一个安全工具函数：function safeSet(key, val) { try { localStorage.setItem(key, val); } catch(e) {} }
- 不依赖LocalStorage时，可用
sessionStorage临时存（关闭标签页即失效），或退化为URL参数（?lang=fr）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
