如何使用 javascript json 保存语言

Question

我在 main.js 和 index.html 中使用以下代码来更改语言。按下按钮后，它可以更改所有三种语言的内容。但是，每次用户更改页面时，语言都会返回 "ENG"。有没有办法保留用户上次选择的语言？谢谢你。

main.js

/* Lang.json newly added */
$.getJSON("Lang.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

$(document).ready(function() {
// The default language is English
  var lang = "ENG";
  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });
});

// get/set the selected language
$(".translate").click(function() {
  var lang = $(this).attr("id");
  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });
});

index.html

<button class="translate" id="ENG">
    <a style="cursor: pointer;"><img src="assets/img/eng.png" /></a> 
</button>
<button class="translate" id="CHT">
    <a style="cursor: pointer;"><img src="assets/img/cht.png" /></a>
</button>
<button class="translate" id="CHS">
    <a style="cursor: pointer;"><img src="assets/img/chs.png" /></a>
</button>

Answer 1

您可以使用localStorage 来保存这些值。查看下面我添加的评论。

$(document).ready(function() {
// The default language is English
  // Get the lang value from localStorage, if not set use the default value 'ENG'
  var lang = window.localStorage.getItem('lang') || "ENG";
  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });

   // get/set the selected language
  $(".translate").click(function() {
    var lang = $(this).attr("id");
    // Save the lang value to localStorage to preserve
    window.localStorage.setItem('lang', lang);
    $(".lang").each(function(index, element) {
      $(this).text(arrLang[lang][$(this).attr("key")]);
    });
  });
});

Answer 2

这是使用 2 个标志的图像更改语言并将可变语言保存在 cookie 中的解决方案，因此如果您在页面之间更改，它将被保存。 lenguage.js

var x= decodeURIComponent(document.cookie);


$('[lang="es"]').hide();
if(x==("lenguage=es")){
  $('[lang="es"]').show();
  $('[lang="en"]').hide();
}

$('#en').click(function() {
    $('[lang="es"]').hide();
    $('[lang="en"]').show();
    document.cookie="lenguage=en"
});

$('#es').click(function() {
    $('[lang="es"]').show();
    $('[lang="en"]').hide();
    document.cookie="lenguage=es"

});

HTML file, change img files.

            </div>
              <a class="navbar-brand flag logo" href="#">
                <img src="img/esRect.png"  class="flag"alt="" id="es">
              </a>
              <a class="navbar-brand flag" href="#">
                <img src="img/ukRect.png"  class="flag"alt="" id="en">
              </a>
            </div>
            
             <script src="js/jquery-3.3.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script src="js/lenguage.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

如何使用 javascript json 保存语言

How to preserve a language using javascript json

javascript

multilingual

json