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

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

帮助会很棒

这是我的密码：

$（'[lang=“fr”]'）。隐藏（）；
$（'[lang=“sp”]'）。隐藏（）；
$（'#lang开关'）。更改（函数（）{
var lang=$（this.val（）；
交换机（lang）{
案例“en”：
$（'[lang]'）。隐藏（）；
$（'[lang=“en”]'）。show（）；
打破
案例“fr”：
$（'[lang]'）。隐藏（）；
$（'[lang=“fr”]'）。show（）；
打破
案例“sp”：
$（'[lang]'）。隐藏（）；
$（'[lang=“sp”]'）。show（）；
打破
违约：
$（'[lang]'）。隐藏（）；
$（'[lang=“en”]'）。show（）；
}
});
[lang=“fr”]，[lang=“sp”]{display:none；}

换语言

英语
法语
西班牙的
你好

Bojour
你好
 
添加
localStorage.setItem（'language'，lang）
保存在客户端，并
localStorage.language
获取保存的值

它不会像在沙箱中那样处理如此简单的代码段

希望这有帮助

下面是一个代码示例，但不适用于代码段

HTML

JS

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

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


下面是重构后的代码

不幸的是，StackOverflow代码是沙盒代码，所以您需要从js FIDLE测试它


//
//原始代码
$（'[lang=“fr”]'）。隐藏（）；
$（'[lang=“sp”]'）。隐藏（）；
//从本地存储中检索值
让savedLang=localStorage.getItem（'lang'）
//我们检查该值是否存在
if（savedLang）{
let element=document.querySelector（`option[value='${savedLang}']`）；
element.selected=true
选择文本（savedLang）；
}
$（'#lang开关'）。更改（函数（）{
var lang=$（this.val（）；
setItem（'lang'，lang）；
选择文本（lang）；
})
//因为这段代码现在是从不同的地方调用的
//我把它提取成一个函数
函数selectText（lang）{
交换机（lang）{
案例“en”：
$（'[lang]'）。隐藏（）；
$（'[lang=“en”]'）。show（）；
打破
案例“fr”：
$（'[lang]'）。隐藏（）；
$（'[lang=“fr”]'）。show（）；
打破
案例“sp”：
$（'[lang]'）。隐藏（）；
$（'[lang=“sp”]'）。show（）；
打破
违约：
$（'[lang]'）。隐藏（）；
$（'[lang=“en”]'）。show（）；
}
}

[lang=“fr”]，[lang=“sp”]{display:none；}

换语言

英语
法语
西班牙的
你好

Bojour
你好
 
Javascript localStorage可能会帮助您参考您可能想要添加如何从localStorage检索以及如何设置。是否有方法使用li标记而不是选择选项？@Brad yes youcan@GerardoBLANCO怎样？我试过了，但没有运气，请看：-非常感谢大家！嘿，@Jean-Pierre64请别忘了标记正确的答案。有没有办法用li标签代替select-option？
    <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>

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

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