语言切换器 - 如何记住用户的选择？

Question

我正在尝试为我开始构建的网站构建语言切换器选项。我想知道 - 如何让网站记住用户的语言选择？我的代码似乎工作得很好，但它恢复为默认语言（英语）。

帮助会很棒！

这是我的代码：

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

您可以使用本地存储来执行此操作。这将是比使用 cookie 更好的选择，因为每次请求时都会将 cookie 发送到服务器（除非您希望能够在服务器端读取此内容））

您可以在其文档中阅读有关本地存储的更多信息

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

这是重构的代码。

不幸的是，StackOverflow 代码是沙盒的，因此您需要从 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>

这是分叉的 jsfiddle：

https://jsfiddle.net/rsjcs65L/