html keep language in bilingual site

问题

I'm working on a bilingual site (spanish/english), I took the advice from the 2nd answer in this post.

This is the bit of code in the navbar that I use to pick a language:

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span lang="es">Idioma</span>
        <span lang="en">Language</span>
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdown06">
        <a class="dropdown-item coll-navbar language">
            <span lang="es">English</span>
            <span lang="en">Español</span>
        </a>
    </div>
</li>

And this is the js code:

$('[lang="en"]').hide();
$('.language').click(function() {
  $('[lang="es"]').toggle();
  $('[lang="en"]').toggle();
});

This is an example of the code implemented:

<div class="title col-12 col-md-8">
    <h2 class="align-center" lang="es"><strong>
            Costura</strong></h2>
    <h2 class="align-center" lang="en"><strong>
            Sewing</strong></h2>
</div>

And, it works great, the only problem is that when I choose the 2nd language and I change the html page, it returns to the first one (spanish in this case); how can I keep, when selected, the 2nd language across all the html's?

Thanks in advance,

回答1:

Method 1:

You can use Jquery Cookie to persist the language values.

$('[lang="en"]').hide();
$('.language').click(function() {
  $('[lang="es"]').toggle();
  $('[lang="en"]').toggle();

  if ($.cookie('lang') === 'en') {
     $.cookie('lang', 'es', { expires: 7 });
  } else {
     $.cookie('lang', 'en', { expires: 7 });
  }
});

Then run the below code block to check for any lang values when the page loads:

if ($.cookie('lang')) {
    var lang = $.cookie('lang');
    document.documentElement.setAttribute('lang', lang);
} else {
    document.documentElement.setAttribute('lang', 'en');

Method 2:

Use Local Storage API to resolve the issue:

<html>
    <head>
        
    </head>

    <body>
        
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span lang="es">Idioma</span>
                <span lang="en">Language</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdown06">
                <a class="dropdown-item coll-navbar language">
                    <span lang="es">English</span>
                    <span lang="en">Español</span>
                </a>
            </div>
        </li>

        <div class="title col-12 col-md-8">
            <h2 class="align-center" lang="es"><strong>
                    Costura</strong></h2>
            <h2 class="align-center" lang="en"><strong>
                    Sewing</strong></h2>
        </div>



    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script type="text/javascript">

        var lang = localStorage.getItem("lang");
        if (lang){
            if (lang == "en"){
                $('[lang="en"]').show();
                $('[lang="es"]').hide();
            }else{
                $('[lang="es"]').show();
                $('[lang="en"]').hide();
            }
        }
        
        
        $('.language').click(function() {
           
            $('[lang="es"]').toggle();
            if (lang === 'en') {
                localStorage.setItem('lang', 'en');
                $('[lang="en"]').show();
                $('[lang="es"]').hide();
            } else {
                localStorage.setItem('lang', 'es');
                $('[lang="es"]').show();
                $('[lang="en"]').hide();
            }
        });
    </script>
    </body>
</html>

回答2:

This is the solution I arrived at, it's based mostly in @HarshanaSerasinghe 2nd answer:

<script type="text/javascript">
    var lang = localStorage.getItem("lang");
    if (lang) {
        if (lang == "en") {
            $('[lang="en"]').show();
            $('[lang="es"]').hide();
        } else {
            $('[lang="es"]').show();
            $('[lang="en"]').hide();
        }
    } else {
        $('[lang="en"]').hide();
        localStorage.setItem('lang', 'es');
    };
    $('.language').click(function() {
        $('[lang="es"]').toggle();
        $('[lang="en"]').toggle();
        if (lang === 'en') {
            localStorage.setItem('lang', 'es');
        } else {
            localStorage.setItem('lang', 'en');
        }
    });
</script>

In case the .language wasn't clicked there was no value in lang, so, when I loaded the site the two languages showed up, I solved this by adding an else clause hiding one language and setting a value to the lang var. onclick, first I toggled both languages, then I modified accordingly the value in lang.

来源：https://stackoverflow.com/questions/64583468/html-keep-language-in-bilingual-site

标签

html

jquery