在所有重定向中更改语言属性值，而无需在链接中使用hreflang属性

Question

I am working on multilanguage website,please, I want to know if there a way when redirect to other page keep actual language attribute value in all localy pages but I prefer not using hreflang cause I have many links and not passing in the query string parameters. Thanks in advance.

Answer 1

I can propose simple solution basing on localStorage . Let's see on example of three html files and one JavaScript:

index.html

<html>
    <head></head>
    <body>
        <header>
            <span data-text="lang.select"></span>
            <ul>
                <li><a data-action="set.lang" data-lang="en" data-text="lang.en"></a></li>
                <li><a data-action="set.lang" data-lang="zh" data-text="lang.zh"></a></li>
            </ul>
        </header>
        <main>
            <h1 data-text="pages.list"></h1>
            <ol>
                <li><a href="a.html" data-text="pages.first"></a></li>
                <li><a href="b.html" data-text="pages.second"></a></li>
            </ol>
        </main>
        <script src="app.js"></script>
    </body>
</html>

In index we have two links to select language in header and two links to subpages. Let's see on data attributes. We will use them in our translator object. Rest of pages is relatively simple and attached only to presend preserving language on redirections.

a.html

<html>
    <body>
        <h1 data-text="page.first.title"></h1>
        <a href="index.html" data-text="pages.index"></a>
        <script src="app.js"></script>
    </body>
</html>

b.html

<html>
    <body>
        <h1 data-text="page.second.title"></h1>
        <a href="index.html" data-text="pages.index"></a>
        <script src="app.js"></script>
    </body>
</html>

These files are nearly the same, difference is in data-text attribute. Now it is time to present app.js .

app.js

const DICT = {
    en: {
        'page.first.title': 'First Page Title',
        'pages.index': 'Go to Index',
        'page.second.title': 'Second Page Title',
        'lang.select': 'Select Language',
        'lang.en': 'English',
        'lang.zh': 'Chinese',
        'pages.first': 'Go do First',
        'pages.second': 'Go to second',
        'pages.list': 'List of pages'
    },
    zh: {
        'page.first.title': '第一页标题',
        'pages.index': '转到索引',
        'page.second.title': '第二页标题',
        'lang.select': '选择语言',
        'lang.en': '英语',
        'lang.zh': '中文',
        'pages.first': '先做吧',
        'pages.second': '转到第二个',
        'pages.list': '页面列表'
    }
};

This file contains dictionary with two levels. First one contain language, second keys used as data-text values. You can separate dictionary from logic in real project, now it is in the same file for simplicity.

Now we want to define Translator object.

function Translator() {
    const lang = this.getLang();
    this.setLang(lang);
    console.log(lang);
    const self = this;

    document.querySelectorAll('[data-action][data-lang]').forEach(
        e => e.addEventListener('click', function () {
            console.log(this.dataset.lang);
            self.setLang(this.dataset.lang)
        })
    );
}

In constructor we first using method getLang that will be presented soon. It returns string with code of language. Then we use setLang to set this lang, this method fills html elements by texts from DICT . Finally we creating event listener on clicking in links to change language.

Now we can present methods of translator:

Translator.prototype.setLang = (lang) => {
    document.querySelectorAll('[data-text]').forEach(
        e => e.innerText = DICT[lang][e.dataset.text]
    );
    localStorage.setItem('lang', lang);
};

setLang gets lang and find all elements with attribute data-text , next put into these elements translations defined in DICT . After this language is saved into localStorage . This is key to surviving language on any refresh or redirect.

Translator.prototype.getLang = () => {
    const lang = localStorage.getItem('lang');
    return lang ? lang : "en";
};

Method getLang getting lang from localStorage but has english set as default value. In this place you can get default value from url or browser config.

Finally last line:

window.t = new Translator();

It is not good practice assign something to window, but in this example allow to have access to translator in console for debugging.

Of course there are many awesome libraries for managing languages on websites and I recommend you learn how to do translation without them but in more complicated projects follow after documentation of your framework that probably have solution allowing to manage lazy loading or caching.