必须用 localstorage.setitem('preferred-lang', 'zh-cn') 显式写入并优先读取，避免刷新回退；localstorage 因稳定、轻量、简单成为首选，但需兼容 ios 无痕模式抛错；只存主语言码如 'zh'，校验后写入，初始化按 localstorage→navigator.language→'en' 顺序 fallback，切换时用 try/catch 封装写入并内存兜底，且存后需手动触发文案更新。
必须用 localStorage.setItem('preferred-lang', 'zh-CN') 显式写入，且初始化时要优先读取它而非仅依赖 navigator.language——否则用户切换后刷新页面就回退到浏览器语言，体验断层。
为什么 localStorage 是首选持久化方式
它比 URL 参数更稳定（不会因分享链接或刷新丢失），比 Cookie 更轻量（不随每次请求发送），也比 IndexedDB 简单（无需事务、版本控制）。但注意：iOS Safari 无痕模式下 localStorage 可能直接抛 SecurityError，所以不能裸用。
- 只存主语言码，如
'zh'或'en'，不要存'zh-CN'这类带区域的完整标签——后续匹配语言包时再补全 - 写入前建议校验值合法性：
if (['zh', 'en', 'ja', 'ko'].includes(lang)) localStorage.setItem('preferred-lang', lang) - 不要监听
storage事件自动响应切换——那是跨标签页同步用的，当前页语言已由 JS 控制，监听反而引发重复渲染
初始化时怎么安全读取并 fallback
页面加载第一件事不是发请求，而是查 localStorage；没命中才退到 navigator.language，再退到硬编码默认值。顺序错会导致用户偏好被覆盖。
- 用
localStorage.getItem('preferred-lang')读，别用localStorage.preferred-lang（语法错误） -
navigator.language返回'zh-CN'时，应提取主语言部分：navigator.language.split('-')[0]得到'zh' - 最终 fallback 值建议写死为
'en'，避免空字符串导致语言包加载失败
切换语言时怎么避免 localStorage 写失败
直接 localStorage.setItem 在私密模式下会崩，必须包裹 try/catch，并提供内存兜底。
- 封装一个
safeSetLang(lang)函数，内部 try 写入，catch 时存到window.__i18n_lang_fallback = lang - 后续所有语言判断逻辑统一走这个函数返回值，而不是每次都读
localStorage - 写入成功后，可顺便触发一次语言包重载（如果已缓存则秒开），但不要在写入回调里嵌套 fetch —— 应该解耦
真正容易被忽略的是：localStorage 不是“设了就生效”，它只是记住了选择；后续所有文案更新、document.documentElement.lang 设置、动态属性（如 placeholder）替换，都得由你手动触发——存对了只是第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
