demo:

链接:https://pan.baidu.com/s/1zhFHTv4P_epbBfpiggVDXg
提取码:aqts
要想有效果,必须发布在服务器上,可以在IIS上测试。

我只用到了中文和英文,想多语言的,就自己添加语言包

把select选择的语言也存在cookie中,刷新页面,也会记住选择

 <select id="ddlSomoveLanguage" onchange="chgLang();">
<option value="zh">中文</option>
<option value="en">ENGLISH</option>
</select>

language_cookie.js

var name = "somoveLanguage";
/*server*/
var ctx = window.document.location.href.substring(0, window.document.location.href.indexOf(window.document.location.pathname)); function chgLang() {
var value = $("#ddlSomoveLanguage").children('option:selected').val();
$('#ddlSomoveLanguage option:selected').text();
SetCookie(name, value);
//location.reload();
}
function SetCookie(name, value) {
var Days = 30; //此 cookie 将被保存 30 天
var exp = new Date(); //new Date("December 31, 9998");
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() +";path=/";
}
function getCookie(name)//取cookies函数
{
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) {
return unescape(arr[2])
} else {
return null;
}
}
var optionList = $("#ddlSomoveLanguage option");
var optionLength = optionList.length;
// 画面加载的时候,执行方法
window.onload = function () {
// 获得cookie,如果没有,默认为 zh
var value = getCookie(name);
value = value == undefined ? "zh" : value;
for (var i = 0; i < optionLength; i++) {
// 匹配 value,如果相同 value 则 selected 选中
if (optionList[i].value == value) {
optionList[i].selected = "selected";
}
}
}
//console.log(getCookie(name));
$(function () {
var uulanguage = (navigator.language || navigator.browserLanguage).toLowerCase();
if (uulanguage.indexOf("en") > -1) {
$("[data-localize]").localize("text", { pathPrefix: ctx + "/Content/lang", language: "en" });
} else if (uulanguage.indexOf("zh") > -1) {
$("[data-localize]").localize("text", { pathPrefix: ctx + "/Content/lang", language: "zh" });
} else {
$("[data-localize]").localize("text", { pathPrefix: ctx + "/Content/lang", language: "zh" });
};
if (getCookie(name) != "") {
if (getCookie(name) == "zh") {
$("[data-localize]").localize("text", { pathPrefix: ctx + "/Content/lang", language: "zh" });
}
if (getCookie(name) == "en") {
$("[data-localize]").localize("text", { pathPrefix: ctx + "/Content/lang", language: "en" });
}
} });

web前端,多语言切换,data-localize,的更多相关文章

  1. web网页多语言的实现方案_前端实现多语言切换

    实现的效果 需要在web中实现多语言的切换,当用户语言切换完成后下次重新打开网页,也是上次设置的语言进行显示. 资源网站搜索大全https://55wd.com 实现步骤 1.在用户点击切换语言后,把 ...

  2. vue 双语言切换中,data内翻译文字不正常切换的解决方案

    背景 有这么一个登录页面,相关功能如下: 支持双语言,点击切换语言 表单内部有一个自定义的select,里面option的label.value都是的名字由外部提供:其中预设的option的label ...

  3. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  4. Web前端开发推荐阅读书籍、学习课程下载

    转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学 ...

  5. Web前端理论知识记录

      Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...

  6. Web前端错题模糊题记录

    title: Web前端错题模糊题记录 toc: true date: 2018-09-20 10:04:36 categories: Web tags: HTML CSS JavaScript HT ...

  7. Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  8. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  9. Web前端上万字的知识总结

    下面是自己学HTML+DIV+CSS+JS时的学习笔记,给大家分享以下,相互学习.大二时候寒假在家无聊的时候想做点事,总结了一下web前端基础的东西,下面的每个字都是自己手敲的. 1.<html ...

  10. web前端基础知识总结

    上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 ...

随机推荐

  1. Jenkins持续集成 入门实践

    本文测试环境: ASP.NET MVC项目,Windows 7环境,SVN代码仓库, MSBuild,TortoiseSVN 持续集成这种工具很多了,Jenkins比较常用,他的原理就是一个服务,有一 ...

  2. Linksys WRT610n V2 刷ddwrt后安装entware-ng,使用opkg

    安装步骤很简单,首先启用usb.jffs.等. 然后: mkdir -p /jffs/opt mount -o bind /jffs/opt /opt wget -O - http://pkg.ent ...

  3. lsb_release command not found

    Linux里的lsb_release命令用来查看当前系统的发行版信 息(prints certain LSB (Linux Standard Base) and Distribution inform ...

  4. slackware在vagrant中使用

    slackware以简洁干净的系统闻名于世,如果你想学习了解linux,那么slackware是一个很好的选择,其他linux不是不好,他们都太复杂了,复杂的你不知道从哪里开始. 所以,还是slack ...

  5. json、数组、html标签的修改删除

    存数组 var aa=[1,2,3]; var sStorage=window.sessionStorage; sStorage.aa=aa; console.log(sStorage.aa); // ...

  6. MySQL查询where条件的顺序对查询效率的影响<转>

    看到有资料说,where条件的顺序会影响查询的效率,根据的逻辑是: where条件的运行是从右到左的,将选择性强的条件放到最右边,可以先过滤掉大部分的数据(而选择性不强的条件过滤后的结果集仍然很大), ...

  7. java 泛型好文收集

    java 泛型详解-绝对是对泛型方法讲解最详细的,没有之一 https://www.cnblogs.com/coprince/p/8603492.html

  8. SAP S4HANA1610/Fiori安装过程全记录

    经历各种坑,从硬件到文件,终于安装成功. 有需要安装或使用S4HANA(含Fiori)的同学可以参考. 安装文件分享给大家 链接:http://pan.baidu.com/s/1mi7LfIS 密码: ...

  9. Module 10:I/O流(java如何实现与外界数据的交流)

    Module 10:I/O流(java如何实现与外界数据的交流) Input/Output:指跨越出了JVM的边界,与外界数据的源头或者目标数据源进行数据交换.               输出   ...

  10. ubuntu安装thrift

    ubuntu环境下安装thrift-0.10.0 1.解压 2.编译安装 ./configure -with-cpp -with-boost -without-python -without-csha ...