Language switcher - How to remember user's choice?

Question

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.com/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.net/ad77gzLu/4/

Answer 1

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.org/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.com/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.net/rsjcs65L/

---