title: How do I keep website content translated even after navigating to another page? (ember.js ember-i18n)
body: <p>I'm currently implementing multiple languages into a web app using ember-i18n and am looking for a way in which visitors and users can choose which language they want at any time.</p>
  
  <p>I'm following a tutorial found <a href="https://github.com/jamesarosen/ember-i18n/wiki/Example:-Language-Chooser" rel="nofollow noreferrer">here</a>, creating a drop down menu which toggles the content's language on the web page that the menu is on. It manages to toggle the page's language without refreshing. </p>
  
  <p>However, when I navigate to a new page or refresh the current one, the language reverts back to the default.  </p>
  
  <p>How can I configure the web app so that the selected language remains active while navigating the site? Do I need to add something extra like including cookies? </p>
  
  <p>The menu and the current environment is setup is as follows:</p>
  
  <p><strong>config/environment.js</strong></p>
  
  <pre><code>module.exports = function(environment) {
      var ENV = {
          ...
  
          i18n: {
              defaultLocale: 'en'}
          };
          ...
      }
  }
  </code></pre>
  
  <p><strong>app/app.js</strong></p>
  
  <pre><code>App = Ember.Application.extend({
      locale: 'es',
      ...
  });
  </code></pre>
  
  <p><strong>app/components/language.js</strong></p>
  
  <pre><code>import Ember from 'ember';
  
  export default Ember.Component.extend({
      i18n: Ember.inject.service(),
      classNames: ['language-select'],
  
      locales: Ember.computed('i18n.locale', 'i18n.locales', function() {
          const i18n = this.get('i18n');
          return this.get('i18n.locales').map(function (loc) {
              return { id: loc, text: i18n.t('language-select.language.' + loc) };
          });
      }),
  
      actions: {
          setLocale() {
              this.set('i18n.locale', this.$('select').val());
          }
      }
  });
  </code></pre>
  
  <p><strong>app/templates/components/language-select.hbs</strong></p>
  
  <pre><code>&lt;select {{action 'setLocale' on='change'}}&gt;
      {{#each locales as |loc|}}
          &lt;option value="{{loc.id}}" selected={{is-equal loc.id i18n.locale}}&gt;
              {{loc.text}}
          &lt;/option&gt;
      {{/each}}
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>app/helpers/is-equal.js</strong></p>
  
  <pre><code>import Ember from "ember";
  
  export default Ember.Helper.helper(function([leftSide, rightSide]) {
      return leftSide === rightSide;
  });
  </code></pre>
  
  <p><strong>app/index.hbs</strong></p>
  
  <pre><code>...
  &lt;p&gt;{{language-select}}&lt;/p&gt;
  ...
  </code></pre>
  
  <p>Additionally, I have my locales.</p>