h5实现i18n语言切换

前言

点击下拉框切换语言，每次打开网站，先获取 cookie 存储里 language，如果有值就设置下拉框当前选中的值，否则获取浏览器语言，并通过 cookie 存储当前语言。每次切换语言调用方法，并通过 cookie 存储当前语言，页面刷新。

引入

script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">/script>
script src="https://cdn.bootcss.com/i18next/1.11.2/i18next.min.js">/script>

dom

select name="" id="i18-select">
	option value="zh"> 中文 option>
	option value="en" >englishoption>
select>
h1 data-i18n="nav.home">h1>
h1 data-i18n="nav.page1">h1>

文件

i18n/en/translation.json:

{
	"nav": {
		"home": "Home",
		"page1": "About Us"
	},
}

i18n/zh/translation.json:

{  
    "nav" :{  
        "home": "网站首页",
        "page1": "关于我们" 
    },
}

方法

$(function(){
	 
	 function getLang(){
		 var langType = getCookie("language");
		 if(langType){
			 
			 $('#i18-select').val(langType);
		 }else{
			 var type = navigator.appName;
			    if (type == "Netscape"){
			        var lang = navigator.language;
			    }else{
			        var lang = navigator.userLanguage;
			    };
			    var lang = lang.substr(0, 2);
			 			  
			 			  $('#i18-select').val(lang);
			   saveCookie('language',lang, 1); 
		 }
	 }
	 getLang();
						
					    function saveCookie(cookieName,cookieValue,cookieDates){
					        var d = new Date();
					        d.setDate(d.getDate()+cookieDates);
					        document.cookie = cookieName+"="+cookieValue+";expires="+d.toGMTString();
					    }
					    
					    function getCookie(cookieName){
					        var cookieStr = unescape(document.cookie);
					        var arr = cookieStr.split(";");
					        var cookieValue = "";
					        for(var i=0;iarr.length;i++){
					            var temp = arr[i].split("=");
					            if(temp[0]==cookieName){
					                cookieValue = temp[1];
					                break;
					            }
					        }
					        return cookieValue;
					    }
						function lang(language){
							$.i18n.init({
								lng: language, 
								resGetPath: './i18n/'+language+'/translation.json',
								ns: {
									namespaces: ['translation', 'message'],
									defaultNs: 'translation' 
								}
							}, function(err, t) {
								$('[data-i18n]').i18n(); 
								$('[data-i18n-html]').each(function(){
									var date_name = $(this).attr("data-i18n-html");
									$(this).html($.t(date_name));
								});
			
								$.t("message:app.child", {
									count: '1'
								}); 
								$.t("message:app.child_plural", {
									count: '2'
								}); 
							});
						}
						var langType = getCookie("language")||"zh";
						lang(langType);
						
						
						$('#i18-select').on('change',function(){
							var val = $(this).val();
							if(val == 'zh'){
								lang("zh");
								saveCookie("language","zh",1);
								location.reload()
							}else{
								lang("en");
								saveCookie("language","en",1);
								location.reload()
							}
						})
					})