使用基于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>

代码的一部分如下所示:

的jsfiddle

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

谢谢!

Answer 1

我会担保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
   }

}

小提琴

我会切换到ReactJS这样的UI.

Answer 2

您可以保存用户选择的语言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';