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

Question

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

例如:

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

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

(您还需要 chop 翻译按钮的 ID。)

当然，浏览器的语言可能是 pt-BR，因此请务必检查一下:

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