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

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

添加localStorage.setItem('language', lang); 保存在客户端和localStorage.language以获取保存的值。

它不适用于SO片段，因为它在沙盒中。

希望这可以帮助

以下是您的代码示例，但不会对代码段起作用

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);
    });

Answer 2

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

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

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

这是重构的代码。

不幸的是，StackOverflow代码是沙箱，所以你需要从js小提琴测试它

  // //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/

---