设置 cookie 以记住用户的语言选择

Question

我在这里找到了一些代码来轻松切换语言

$('[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>

到目前为止它工作得很好，但唯一的问题是默认是德语。无论用户首先选择了什么。因此，当用户浏览页面时，语言每次都会重置为德语。

我已经找到了一些需要 cookie 的帖子，但我不知道如何为这种情况设置它们。 所有示例都链接到其他页面。

如果您有任何想法，请告诉我。

非常感谢。

Answer 1

您可以使用document cookie function 保存并读取cookie。

当页面加载时，检查是否保存了带有您的 lang 值的 cookie。如果有，获取语言值并设置选择器和文本显示。如果不是，则显示默认语言。

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=/";
        }
    });

请记住，如果您确实将所有语言放在一个页面上，而不是为每种语言设置一个单独的页面，Google 和其他搜索引擎可能会认为您的页面主要针对 html 中设置的语言标签（例如 html lang="de" 标签）。

关于语言的另一个注意事项（您可能已经在做）是检查请求标头中的 Accept-Language 字段，并在服务器中配置您的页面以将页面设置为访问者的首选语言之一，如果你有它。