Question

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

帮助太棒了！

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

https://jsfiddle.net/ad77gzLu/4/

Answer 1

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

它不会像在SObox片段中那样在沙盒中工作。

希望这有帮助

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

起作用

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/

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

2 个答案: