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. GOF提出的23种设计模式是哪些 设计模式有创建形、行为形、结构形三种类别 常用的Javascript中常用设计模式的其中17种 详解设计模式六大原则

    20151218mark 延伸扩展: -设计模式在很多语言PHP.JAVA.C#.C++.JS等都有各自的使用,但原理是相同的,比如JS常用的Javascript设计模式 -详解设计模式六大原则 设计 ...

  2. 【Inno Setup】添加许可协议,并默认选中我同意按钮

      [Setup] ; xkfile.txt文件不能为空 LicenseFile=C:\Documents and Settings\Administrator\桌面\smqh\xkfile.txt ...

  3. MySQL字符集不一致的解决办法总结

    用SHOW CREATE TABLE table_name;可以看出具体的字符集设置. 错误代码: Illegal mix of collations (utf8mb4_unicode_ci,IMPL ...

  4. MySQL 4 种隔离级别的区别

    ## 测试环境 mysql> select version(); +------------+ | version() | +------------+ -log | +------------ ...

  5. 安装sqlserver后 服务启动过几秒就自动停止

    今天安装sqlserver2014后 发现启动2014的服务,过几秒就会自动停止 通过查看windows日志发现是系统库路径报错~ google了下 发现 "重新生成系统库"就能解 ...

  6. curl 模拟请求

    https://www.jianshu.com/p/7965c56c5a2e ********************************************* 一般情况下我们会在网页上请求后 ...

  7. poi操作Excel的封装类

    这是一个简单的对poi的封装,只能简单的取值,设值,拷贝行,插入行等. 针对读取Excel模板后,填值再保存的应用,比较方便. poi版本:3.13 贴代码: package cn.com.gtmc. ...

  8. C语言——数组名、取数组首地址的区别(一)

    目录: 1. 开篇 2. 论数组名array.&array的区别 3. array.&array的区别表现在什么地方 4. 讨论 5. 参考 1.开篇 很多博客和贴吧都有讨论这个话题, ...

  9. 关于QQ邮箱有时候接受不到邮件的解决

    1.很可能是被当作垃圾邮件拦截了,这时候就要自己找回 2.首先点击邮箱首页 3.在最后一行倒数第三个选择自助查询 4.一般在收信查询或者删信查询里面,找到被删的邮件,添加到白名单就好了

  10. 使用winsw部署spring boot jar 项目

    参考:用winsw让任何Windows程序都能运行为服务 简介在linux下部署springboot项目是一件很简单的事,直接后台运行就行了,最多写个shell脚本开机自启就行了.我们最近做的项目需要 ...