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

Question

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

例如：

为get/set所选语言创建客户端脚本：

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

但是，当我刷新页面或导航到另一个页面时，它 returns 为原始语言。有什么方法可以通过刷新页面来保持所选语言吗？

谢谢！

Answer 1

您可以将所选语言保存在 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

这是您更新后的 fiddle：https://jsfiddle.net/20zo4wg8/1/

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

您可以使用 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') 将 return 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';

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

Build multiple language website using jQuery and JSON based methods

javascript

multilingual

jquery

json