使用i18next的多语言网站：语言选择无法记忆问题求助

API 探路者

2026-8-8

解决i18next多语言网站语言选择不持久的问题

问题根源

你之前的代码里localStorage.getItem(key)中的key是未定义的变量，这会触发JavaScript报错，导致网站无法正常加载。

分步解决方案（适合新手）

1. 定义固定的存储键名

先给localStorage存储语言的字段起个明确的名字，比如'user-selected-language'，避免使用未定义的变量。

2. 修正i18next初始化配置

把原来的lng: "eng"替换成下面的代码，确保能正确读取本地存储的语言，没有存储值时就用默认的"eng"：

lng: localStorage.getItem('user-selected-language') || 'eng',

3. 修改语言切换函数，添加持久化逻辑

每次用户切换语言时，要把选择的语言存入localStorage，这样刷新或跳转页面后才能读取到。示例切换函数如下：

function switchLanguage(targetLang) {
  // 切换i18next的当前语言
  i18next.changeLanguage(targetLang);
  // 将选择的语言存入本地存储
  localStorage.setItem('user-selected-language', targetLang);
  // 更新页面上的多语言文本（对应你项目里的文本渲染函数）
  renderPageTexts();
}

4. 完整初始化示例（参考）

如果你的i18next初始化代码是类似结构，可以替换成这个完整版本：

i18next.init({
  lng: localStorage.getItem('user-selected-language') || 'eng', // 优先读本地存储，无则用默认值
  resources: {
    eng: {
      translation: {
        // 你的英文翻译内容
      }
    },
    // 其他语言的翻译资源
  }
}, function(err, t) {
  if (err) console.error('i18next初始化出错:', err);
  // 初始化页面文本
  renderPageTexts();
});