使用基于jQuery和JSON的方法构建多语言网站

Question

我正在尝试为一个网站实现多语言。我更喜欢使用客户端脚本来更改English和Traditional Chinese之间的语言。

例如：

创建客户端脚本以获取/设置所选语言：

$(document).ready(function() {
  // The default language is English
  var lang = "en-gb";
  $(".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")]);
  });
});

然后，构建多语言字典到JSON结构：

var arrLang = {
    "en-gb": {
        "HOME": "Home",
        "ABOUT": "About Us",
        "CONTACT": "Contact Us",
    },
    "zh-tw": {
        "HOME": "首頁",
        "ABOUT": "關於我們",
        "CONTACT": "聯絡我們",
    }
};  

这是我的HTML页面：

<button class="translate" id="en-gb">English</button>
<button class="translate" id="zh-tw">Chinese</button>

<ul>
    <li class="lang" key="HOME"></li>
    <li class="lang" key="ABOUT"></li>
    <li class="lang" key="CONTACT"></li>
</ul>

代码的一部分如下所示：

var arrLang = {
  "en-gb": {
    "HOME": "Home",
    "ABOUT": "About Us",
    "CONTACT": "Contact Us",
  },
  "zh-tw": {
    "HOME": "首頁",
    "ABOUT": "關於我們",
    "CONTACT": "聯絡我們",
  }
};

$(document).ready(function() {
  // The default language is English
  var lang = "en-gb";
  $(".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")]);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="translate" id="en-gb">English</button>
<button class="translate" id="zh-tw">Chinese</button>

<ul>
  <li class="lang" key="HOME"></li>
  <li class="lang" key="ABOUT"></li>
  <li class="lang" key="CONTACT"></li>
</ul>

但是，当我刷新页面或导航到另一个页面时，它将返回到原始语言。有没有办法通过刷新页面来保持所选语言？

谢谢！

Answer 1

您可以使用window.localStorage保存用户选择的语言，并在加载页面时读取它：

// save, in your .translate click handler
localStorage.setItem('lang', $(this).attr('id'));

// load, on DOMContentLoaded
var lang = localStorage.getItem('lang') || 'en-gb';

如果用户没有选择语言，localStorage.getItem('lang')将返回null，lang将设置为您的默认值'en-gb'。

但为什么你的默认是英语？浏览器知道它（并且可能是用户）喜欢的语言。您可以使用navigator.language访问浏览器的首选语言。当然，这可能是像你的语言列表中的zh-SG，但应该（可能？）用中文呈现页面。要处理此行为，您只需获取语言代码的前两个字符，并将其用作字符串列表中的键：

var arrLang = {
    "en": {
        "HOME": "Home",
        "ABOUT": "About Us",
        "CONTACT": "Contact Us",
    },
    "zh": {
        "HOME": "首頁",
        "ABOUT": "關於我們",
        "CONTACT": "聯絡我們",
    }
};

var lang = localStorage.getItem('lang') || navigator.language.slice(0, 2);

（您还需要截断翻译按钮的ID。）

当然，浏览器的语言可能是pt-BR，所以一定要检查一下：

var lang = localStorage.getItem('lang') || navigator.language.slice(0, 2);
if (!Object.keys(arrLang).includes(lang)) lang = 'en';

Answer 2

我会保证localStorage或sessionStorage。

// The default language is English
var lang = "en-gb";
// Check for localStorage support
if('localStorage' in window){

   var usrLang = localStorage.getItem('uiLang');
   if(usrLang) { // If key exists, then use that found in localStorage
       lang = usrLang
   }

}

fiddle

我会切换到ReactJS这样的UI。

Answer 3

您可以在cookie上保存所选语言。

您可以使用设置和获取cookie。

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

Source

这是你更新的小提琴：https://jsfiddle.net/20zo4wg8/1/