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

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

谢谢！

原文由 Penny Liu 发布，翻译遵循 CC BY-SA 4.0 许可协议

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';

If the user hasn’t selected a language, localStorage.getItem('lang') will return null and lang will be set to your default, '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';

原文由 AuxTaco 发布，翻译遵循 CC BY-SA 3.0 许可协议

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
   }

}

小提琴

我会为这样的 UI 切换到 ReactJS。

原文由 Adam Azad 发布，翻译遵循 CC BY-SA 3.0 许可协议