I'm trying to build a language switcher option for a site that I started building. I was wondering - How can make the site remember the user's language choice? My code seems to be working perfectly fine, but it reverts back to the default language (English).

Help would be awesome!

Here's my code:

 $('[lang="fr"]').hide();
    $('[lang="sp"]').hide();

    $('#lang-switch').change(function () {
    var lang = $(this).val();
    switch (lang) {
    case 'en': 
      $('[lang]').hide();
      $('[lang="en"]').show();
      break;
    case 'fr':
      $('[lang]').hide();
      $('[lang="fr"]').show();
      break;
    case 'sp':
      $('[lang]').hide();
      $('[lang="sp"]').show();
      break;
    default:
      $('[lang]').hide();
      $('[lang="en"]').show();
      }
    });

 [lang="fr"],[lang="sp"]{display:none;} 

<script src=".1.1/jquery.min.js"></script>
<p>Change language</p>
    <select id="lang-switch">
    <option value="en">English</option>
    <option value="fr">French</option>
    <option value="sp">Spanish</option>
    </select>

<p lang="en">Hello!</p>
<p lang="fr">Bojour!</p>
<p lang="sp">Hola!</p>

I'm trying to build a language switcher option for a site that I started building. I was wondering - How can make the site remember the user's language choice? My code seems to be working perfectly fine, but it reverts back to the default language (English).

Help would be awesome!

Here's my code:

 $('[lang="fr"]').hide();
    $('[lang="sp"]').hide();

    $('#lang-switch').change(function () {
    var lang = $(this).val();
    switch (lang) {
    case 'en': 
      $('[lang]').hide();
      $('[lang="en"]').show();
      break;
    case 'fr':
      $('[lang]').hide();
      $('[lang="fr"]').show();
      break;
    case 'sp':
      $('[lang]').hide();
      $('[lang="sp"]').show();
      break;
    default:
      $('[lang]').hide();
      $('[lang="en"]').show();
      }
    });

 [lang="fr"],[lang="sp"]{display:none;} 

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Change language</p>
    <select id="lang-switch">
    <option value="en">English</option>
    <option value="fr">French</option>
    <option value="sp">Spanish</option>
    </select>

<p lang="en">Hello!</p>
<p lang="fr">Bojour!</p>
<p lang="sp">Hola!</p>

https://jsfiddle/ad77gzLu/4/

• javascript
• jquery

• 1 Javascript localStorage would maybe help you refer to w3schools./html/html5_webstorage.asp – Basch Commented Apr 3, 2018 at 18:44

2 Answers 2

you can use local storage to do this. This will be a better option rather than using cookies because cookies are sent to the server on every request (unless you want to be able to read this on the server side))

you can read more about local storage here on its documentation

https://developer.mozilla/en-US/docs/Web/API/Window/localStorage

here is the refactored code.

Unfortunately, StackOverflow code is sandboxed so you will need to test it from js fiddle

    //
    //original code
    $('[lang="fr"]').hide();
    $('[lang="sp"]').hide();
    //retrieve value from localstorage
    let savedLang = localStorage.getItem('lang')
    //we check if the value is present
    if(savedLang){
      let element = document.querySelector(`option[value='${savedLang}']`);
    	element.selected = true
      selectText(savedLang);
    }

    $('#lang-switch').change(function () {
      var lang = $(this).val();
      localStorage.setItem('lang', lang);
      selectText(lang);
    })
    
    //as this code is called from different places now
    //I extracted it to a funciton
    function selectText(lang){
      switch (lang) {
      case 'en': 
        $('[lang]').hide();
        $('[lang="en"]').show();
        break;
      case 'fr':
        $('[lang]').hide();
        $('[lang="fr"]').show();
        break;
      case 'sp':
        $('[lang]').hide();
        $('[lang="sp"]').show();
        break;
      default:
        $('[lang]').hide();
        $('[lang="en"]').show();
        }
    }
    
    

 [lang="fr"],[lang="sp"]{display:none;} 

   <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <p>Change language</p>
    <select id="lang-switch">
    <option value="en">English</option>
    <option value="fr">French</option>
    <option value="sp">Spanish</option>
    </select>

<p lang="en">Hello!</p>
<p lang="fr">Bojour!</p>
<p lang="sp">Hola!</p>

here is the forked jsfiddle:

https://jsfiddle/rsjcs65L/

Add localStorage.setItem('language', lang); to save in client side and localStorage.language to get the saved value.

It won't work on the SO snippet as it is in a sandbox.

Hope this helps

Here is an example with your code but wont work on the snippet

HTML

    <p>Change language</p>
    <select id="lang-switch">
    <option value="en">English</option>
    <option value="fr">French</option>
    <option value="sp">Spanish</option>
    </select>

<p lang="en">Hello!</p>
<p lang="fr">Bojour!</p>
<p lang="sp">Hola!</p>

<button onclick="alert(localStorage.language)">
Get storage
</button>

CSS

[lang="fr"],[lang="sp"]{display:none;} 

JS

$('[lang="fr"]').hide();
    $('[lang="sp"]').hide();

    $('#lang-switch').change(function () {
    var lang = $(this).val();
    switch (lang) {
    case 'en': 
      $('[lang]').hide();
      $('[lang="en"]').show();
      break;
    case 'fr':
      $('[lang]').hide();
      $('[lang="fr"]').show();
      break;
    case 'sp':
      $('[lang]').hide();
      $('[lang="sp"]').show();
      break;
    default:
      $('[lang]').hide();
      $('[lang="en"]').show();
      }
      localStorage.setItem('language',lang);
    });