使用jquery-i18n-properties实现多语言切换，自动选择，及持久化

    jQuery.i18n.properties是一款轻量级的jQuery国际化插件，能实现Web前端的国际化。 

国际化英文单词为：Internationalization，又称i18n，“i”为单词的第一个字母，“18”为“i”和“n”之间单词的个数，而“n”代表这个单词的最后一个字母。jQuery.i18n.properties采用.properties文件对JavaScript进行国际化。jQuery.i18n.properties插件首先加载默认的资源文件（strings.properties），然后加载针对特定语言环境的资源文件（strings_zh.properties），这就保证了在未提供某种语言的翻译时，默认值始终有效。

官方地址：https://code.google.com/archive/p/jquery-i18n-properties/

官方github地址：https://github.com/jquery-i18n-properties/jquery-i18n-properties

实现步骤，

第一步：下载JS插件

jquery.i18n.properties.js

第二步

编写前端页面

<select id="lang" class=" form-control">
<option value="zh-CN">中文</option>
<option value="en">English</option>
</select>
<label data-locale="username">用户名：</label><input type="text">

<label data-locale="password">密码：</label><input type="password">

编写JS

loadProperties();

function loadProperties() {
jQuery.i18n.properties({ //加载资浏览器语言对应的资源文件
name: 'strings', //属性文件名     命名格式： 文件名_国家代号.properties  
path: 'i18n/', //注意这里路径是你属性文件的所在文件夹  
mode: 'map', //用Map的方式使用资源文件中的值   
//language: 'zh', //国家代号 name+language刚好组成属性文件名：strings+zh -> strings_zh.properties 
//删除则自动选择浏览器语言
callback: function() {
$("[data-l ocale]").each(function() {
//console.log($(this).data("locale"));  
$(this).html($.i18n.prop($(this).data("locale")));


});
}
});

}

    持久化

$(function() {
if(!localStorage.currentLang) {
//本地存储当前选中语言
localStorage.currentLang = $('#lang option:selected').val();
} else {
//定义当前语言
var currLang = localStorage.currentLang;
$("#lang option[value=" + currLang + "]").attr("selected", true);
$("#lang").on('change', function() {
//存储当前选中的语言
localStorage.currentLang = $(this).children('option:selected').val();
//单页面可以注释
//刷新
location.reload();
loadProperties(localStorage.currentLang);
});
}
loadProperties(localStorage.currentLang)
});


function loadProperties(currentLang) {
switch(currentLang) {
case 'en':
langi18n = 'en';
break;
case 'zh':
langi18n = 'zh';
break;
default:
langi18n = 'zh';
}
jQuery.i18n.properties({ //加载资浏览器语言对应的资源文件
name: 'strings', //属性文件名     命名格式： 文件名_国家代号.properties  
path: 'i18n/', //注意这里路径是你属性文件的所在文件夹  
mode: 'map', //用Map的方式使用资源文件中的值   
language: langi18n, //国家代号 name+language刚好组成属性文件名：strings+zh -> strings_zh.properties 
//删除则自动选择浏览器语言
callback: function() {
$("[data-i18n]").each(function() {
$(this).html($.i18n.prop($(this).data("i18n")));
//特殊标签处理
$(this).attr('placeholder', $.i18n.prop($(this).attr('data-i18n')));
});
}
});
}

编写语言包

strings_en.properties

username=NAME

password=PASSWORD

strings_zh.properties

username=用户名

password=密码

注，请在服务器中打开。

下载地址

http://download.youkuaiyun.com/download/u013317712/10247518