How do I keep website content translated even after navigating to another page? (ember.js ember-i18n)

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.

I'm following a tutorial found here, 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.

However, when I navigate to a new page or refresh the current one, the language reverts back to the default.

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?

The menu and the current environment is setup is as follows:

config/environment.js

module.exports = function(environment) {
    var ENV = {
        ...

        i18n: {
            defaultLocale: 'en'}
        };
        ...
    }
}

app/app.js

App = Ember.Application.extend({
    locale: 'es',
    ...
});

app/components/language.js

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());
        }
    }
});

app/templates/components/language-select.hbs

<select >
    
        <option value="" selected=>
            
        </option>
    
</select>

app/helpers/is-equal.js

import Ember from "ember";

export default Ember.Helper.helper(function([leftSide, rightSide]) {
    return leftSide === rightSide;
});

app/index.hbs

...
<p></p>
...

Additionally, I have my locales.