CODEWITHSUNDEEP
javascripthtmljquerycookies
jona
jona

Reputation: 384

Set cookie to remember language selection of user

I've found some code here to get an easy language switch

$('[lang]').hide();
$('[lang="de"]').show();
$('#lang-switch').change(function () {
    var lang = $(this).val();
    switch (lang) {
        case 'en':
            $('[lang]').hide();
            $('[lang="en"]').show();
        break;
        case 'de':
            $('[lang]').hide();
            $('[lang="de"]').show();
        break;
        default:
            $('[lang]').hide();
            $('[lang="de"]').show();
        }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
    <label for="lang-switch">
        <span lang="de">Sprache</span>
        <span lang="en">Language</span>
    </label>
    <select id="lang-switch">
        <option value="en">English</option>
        <option value="de" selected>Deutsch</option>
    </select>
</form>

<p>
    <span lang="de">Text in German</span>
    <span lang="en">Text in English</span>
</p>

It's working great so far, but the only problem is that the default is german. No matter what the user selected first. So when the user navigates through the page, the language resets every time to german.

I already found some posts that I need cookies, but I don't know how I can set them up for this case. All the examples were to link to other pages.

If you have any ideas, please let me know.

Thank you very much.

Upvotes: 1

Views: 4008

Answers (1)

Rich DeBourke
Rich DeBourke

Reputation: 3423

You can use the document cookie function to save and then read a cookie.

When the page loads, check to see if a cookie with your lang value has been saved. If it has, get the language value and set the selector and text display. If not, the display the default language.

var langStr;

    $('span[lang]').hide();
    if (document.cookie.indexOf("lang=") >= 0) {
        langStr = document.cookie.indexOf("lang=");
        langStr = document.cookie.substring(langStr + 5, langStr + 7);
        $('#lang-switch option')
            .removeAttr('selected')
            .filter('[value=' + langStr + ']')
            .attr('selected', true);
        langStr = '[lang="' + langStr + '"]';
        console.log(langStr);
        $(langStr).show();
    } else {
        // No cookie - show default language
        $("[lang='de']").show();
    }

    $('#lang-switch').change(function () {
        var CookieDate = new Date, tmp;
        CookieDate.setFullYear(CookieDate.getFullYear() +10);
        var lang = $(this).val();
        switch (lang) {
            case 'en':
                $('span[lang]').hide();
                $('span[lang="en"]').show();
                document.cookie = "lang=en; expires=" + CookieDate.toUTCString() + "; path=/";
                break;
            default:
                $('span[lang]').hide();
                $('span[lang="de"]').show();
                document.cookie = "lang=de; expires=" + CookieDate.toUTCString() + ";path=/";
        }
    });

Keep in mind that if you do put all of your languages on a single page, rather than having a separate page for each language, Google and the other search engines might think of your page as mostly for the language set in the html tag (e.g. the html lang="de" tag).

One other note regarding languages, which you may already be doing, is to check the Accept-Language field in the request header and configure your page in your server to send out the page set to one of the visitor’s preferred languages, if you have it.

Upvotes: 1

Related Questions