设置 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

您可以使用文档 cookie 功能保存然后读取 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 字段并在您的服务器中配置您的页面以发送设置为访问者首选语言之一的页面（如果您有的话） .