如何使用ember-i18n实现页面跳转后网站翻译状态持久化？

这个问题我之前帮不少开发者解决过——核心原因就是你切换语言后没把用户的选择持久化下来，刷新或跳转后应用又回到了默认配置。别担心，几步就能搞定：

1. 切换语言时持久化用户选择 #

首先，在你处理语言切换的action里，把选中的语言保存到localStorage（或者cookie，看你的需求）。比如在组件或者控制器的action中：

actions: {
  switchLanguage(selectedLocale) {
    // 先设置当前应用的语言
    this.set('i18n.locale', selectedLocale);
    // 把选择存到localStorage，确保刷新后能读取
    localStorage.setItem('app-user-locale', selectedLocale);
  }
}

2. 应用启动时加载保存的语言 #

接下来要让应用在初始化时自动读取之前保存的语言设置，覆盖默认值。这里有两种常用方式：

方式一：用Ember初始化器（Initializer） #

创建一个初始化器文件app/initializers/setup-user-locale.js，确保在ember-i18n之后执行：

export function initialize(application) {
  // 获取i18n服务
  const i18nService = application.lookup('service:i18n');
  // 读取localStorage里保存的语言
  const savedLocale = localStorage.getItem('app-user-locale');
  
  // 如果有保存的值，就设置为当前语言；没有则用默认
  if (savedLocale) {
    i18nService.set('locale', savedLocale);
  }
}

export default {
  initialize,
  name: 'setup-user-locale',
  // 确保在ember-i18n初始化之后再执行
  after: 'ember-i18n'
};

方式二：在Application路由的beforeModel钩子中处理 #

如果你用的是Ember Octane，更推荐在Application路由里处理，逻辑更直观：

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ApplicationRoute extends Route {
  @service i18n;

  beforeModel() {
    const savedLocale = localStorage.getItem('app-user-locale');
    if (savedLocale) {
      this.i18n.locale = savedLocale;
    }
  }
}

3. 进阶：处理登录用户的跨设备同步（可选） #

如果你的应用有登录功能，想要用户的语言偏好跨设备同步，可以在切换语言时同时调用后端API，把语言设置保存到用户的数据库记录里。然后在应用启动时，先检查用户是否登录，如果已登录就从后端获取语言设置，再 fallback 到localStorage：

// 示例：在Application路由的beforeModel中
async beforeModel() {
  const session = this.session; // 假设你用了ember-simple-auth之类的会话服务
  if (session.isAuthenticated) {
    // 从后端获取用户的语言偏好
    const user = await this.store.findRecord('user', session.currentUser.id);
    const userLocale = user.get('preferredLocale');
    if (userLocale) {
      this.i18n.locale = userLocale;
      // 同时更新localStorage，保持一致
      localStorage.setItem('app-user-locale', userLocale);
    }
  } else {
    // 未登录时读取localStorage
    const savedLocale = localStorage.getItem('app-user-locale');
    if (savedLocale) {
      this.i18n.locale = savedLocale;
    }
  }
}

注意事项 #

• 记得处理localStorage不可用的场景（比如浏览器隐私模式），这时候可以 fallback 到cookie或者直接用默认语言。
• 确保你的ember-i18n配置里的默认语言是合理的 fallback 选项，比如en。

内容的提问来源于stack exchange，提问作者user98826